@font-face {
      font-family: 'IRANSansFaNum';
      src: url('/assets/fonts/iransans-fanum.ttf') format('truetype');
      font-weight: 400 800;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --bg: #f4f6f8;
      --panel: #ffffff;
      --panel-soft: #f8fafb;
      --text: #172033;
      --muted: #647180;
      --border: #dce3ea;
      --border-strong: #c6d0da;
      --primary: #1f6feb;
      --primary-dark: #1558bf;
      --button-primary: #1f6feb;
      --button-primary-hover: #1558bf;
      --on-button-primary: #ffffff;
      --success: #087650;
      --danger: #c2413a;
      --warning: #b7791f;
      --shadow: 0 16px 42px rgba(23, 32, 51, 0.08);
      --input-bg: #ffffff;
      --table-bg: #ffffff;
      --table-head: #f8fafc;
      --table-line: #edf1f5;
      --hover: #f8fbff;
      --skeleton-base: #e8eef5;
      --skeleton-shine: #f8fafc;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 18px;
      --control-height: 44px;
      --content-max: 1480px;
      --z-header: 20;
      --z-popover: 100;
      --z-dialog: 1000;
    }
    body.dark,
    html[data-theme="dark"] body {
      --bg: #0f172a;
      --panel: #111c2e;
      --panel-soft: #162338;
      --text: #e5edf6;
      --muted: #94a3b8;
      --border: #26364d;
      --border-strong: #3b4d67;
      --primary: #60a5fa;
      --primary-dark: #93c5fd;
      --button-primary: #2563eb;
      --button-primary-hover: #1d4ed8;
      --on-button-primary: #ffffff;
      --success: #34d399;
      --danger: #f87171;
      --warning: #fbbf24;
      --shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
      --input-bg: #0b1220;
      --table-bg: #0b1220;
      --table-head: #172338;
      --table-line: #22324a;
      --hover: #142136;
      --skeleton-base: #1f2e45;
      --skeleton-shine: #2b3d58;
    }
    * { box-sizing: border-box; }
    html {
      width: 100%;
      max-width: 100%;
      overscroll-behavior-x: none;
    }
    body {
      margin: 0;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      font-family: 'IRANSansFaNum', Tahoma, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.75;
      overflow-wrap: break-word;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overscroll-behavior-x: none;
    }
    img, svg, canvas { max-width: 100%; }
    input, select, button, textarea { max-width: 100%; }
    body::before {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      height: 220px;
      background: linear-gradient(180deg, #e6edf5 0%, rgba(230, 237, 245, 0) 100%);
      pointer-events: none;
      z-index: -1;
    }
    body.dark::before {
      background: linear-gradient(180deg, #172338 0%, rgba(23, 35, 56, 0) 100%);
    }
    main {
      width: min(1360px, calc(100% - 32px));
      margin: 12px auto 36px;
      min-width: 0;
    }
    .sticky-shell {
      position: relative;
      top: auto;
      z-index: 20;
      padding: 12px 0;
      background: linear-gradient(180deg, var(--bg) 0%, rgba(244, 246, 248, 0.94) 80%, rgba(244, 246, 248, 0) 100%);
      backdrop-filter: blur(12px);
    }
    body.dark .sticky-shell {
      background: linear-gradient(180deg, var(--bg) 0%, rgba(15, 23, 42, 0.94) 80%, rgba(15, 23, 42, 0) 100%);
    }
    .sticky-shell .toolbar { margin-top: 10px; }
    h1, h2, h3, p { margin-top: 0; }
    .app-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      background: color-mix(in srgb, var(--text) 4%, var(--panel));
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 20px 22px;
      box-shadow: var(--shadow);
      min-width: 0;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      color: var(--primary-dark);
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .app-title h1 {
      font-size: clamp(20px, 2vw, 28px);
      line-height: 1.45;
      margin: 0;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }
    .app-title p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
    }
    .site-logo {
      display: block;
      width: 170px;
      height: 40px;
      object-fit: contain;
    }
    .brand-mark {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      padding: 9px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--panel-soft);
      box-shadow: 0 8px 22px rgba(23, 32, 51, 0.08);
    }
    .brand-mark img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .header-context {
      min-width: 0;
      display: grid;
      gap: 3px;
      padding: 8px 14px;
      border-inline-start: 1px solid var(--border);
    }
    .header-context[hidden] { display: none; }
    .header-context strong {
      overflow: hidden;
      color: var(--text);
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .header-context span {
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 190px;
      min-height: 42px;
      padding: 5px 7px 5px 11px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-soft);
    }
    .user-avatar {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--button-primary);
      color: var(--on-button-primary);
      font-size: 13px;
      font-weight: 900;
    }
    .user-avatar svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .user-name {
      overflow: hidden;
      color: var(--text);
      font-size: 11px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 112px;
      min-height: 36px;
      padding: 6px 14px;
      border-radius: 999px;
      background: #edf3ff;
      color: #1d4ed8;
      border: 1px solid #cfe0ff;
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap;
    }
    .status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
    }
    .status.done {
      background: #e8f7ef;
      color: var(--success);
      border-color: #bfe8d4;
    }
    .status.error {
      background: #fff0ef;
      color: var(--danger);
      border-color: #ffd2cf;
    }
    .toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end;
      margin-top: 16px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06);
    }
    .input-shell label,
    label {
      display: block;
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .input-shell {
      position: relative;
      min-width: 0;
    }
    .search-field {
      position: relative;
      min-width: 0;
    }
    .search-field > svg {
      position: absolute;
      z-index: 2;
      top: 50%;
      inset-inline-start: 14px;
      width: 19px;
      height: 19px;
      transform: translateY(-50%);
      fill: none;
      stroke: var(--muted);
      stroke-width: 2;
      stroke-linecap: round;
      pointer-events: none;
    }
    .search-field input {
      padding-inline-start: 43px;
    }
    input,
    select {
      width: 100%;
      height: 46px;
      border: 1px solid var(--border-strong);
      border-radius: 7px;
      padding: 10px 13px;
      font: inherit;
      background: var(--input-bg);
      color: var(--text);
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    input:focus,
    select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
    }
    .symbol-suggestions {
      position: absolute;
      inset-inline: 0;
      top: calc(100% + 6px);
      z-index: 35;
      display: none;
      max-height: 280px;
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 18px 42px rgba(23, 32, 51, 0.16);
    }
    .symbol-suggestions.open {
      display: grid;
      gap: 4px;
      transform-origin: top center;
      animation: suggestion-pop-in 180ms cubic-bezier(.2, .75, .25, 1);
    }
    @keyframes suggestion-pop-in {
      from { opacity: 0; transform: translateY(-5px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .symbol-suggestion {
      width: 100%;
      min-width: auto;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 10px;
      border-radius: 6px;
      background: transparent;
      color: var(--text);
      box-shadow: none;
      font-size: 13px;
      text-align: right;
    }
    .symbol-suggestion:hover,
    .symbol-suggestion.active {
      background: var(--panel-soft);
      color: var(--primary-dark);
    }
    .symbol-suggestion small {
      color: var(--muted);
      font-size: 11px;
    }
    .symbol-suggestion-empty {
      padding: 9px 10px;
      color: var(--danger);
      font-size: 12px;
      font-weight: 700;
      text-align: right;
    }
    button {
      height: 46px;
      border: 0;
      border-radius: 7px;
      padding: 0 18px;
      font: inherit;
      font-weight: 800;
      background: var(--button-primary);
      color: var(--on-button-primary);
      cursor: pointer;
      min-width: 132px;
      box-shadow: 0 9px 20px rgba(31, 111, 235, 0.18);
      transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    #startBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    #startBtn svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    button:hover { background: var(--button-primary-hover); }
    button:active { transform: translateY(1px); }
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
      outline-offset: 2px;
    }
    button:disabled {
      opacity: 0.65;
      cursor: wait;
      transform: none;
    }
    .grid {
      display: grid;
      grid-template-columns: minmax(310px, 0.78fr) minmax(0, 1.42fr);
      gap: 16px;
      margin-top: 16px;
      align-items: stretch;
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      min-height: 120px;
      box-shadow: 0 10px 28px rgba(23, 32, 51, 0.045);
      min-width: 0;
      transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .summary-card:hover,
      .fund-change-card:hover,
      .fund-allocation-card:hover,
      .fund-flow-card:hover,
      .fund-valuation-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
        box-shadow: 0 13px 30px rgba(23, 32, 51, .075);
      }
    }
    .panel + .panel { margin-top: 16px; }
    .panel-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      min-width: 0;
    }
    .panel-heading > div { min-width: 0; }
    .panel-heading h2 {
      font-size: 16px;
      line-height: 1.6;
      margin: 0;
      overflow-wrap: anywhere;
    }
    .panel-heading p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .panel-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .header-icons {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .header-icons .theme-button,
    .header-icons .logout-link {
      width: 36px;
      min-width: 36px;
      height: 36px;
      min-height: 36px;
      max-height: 36px;
      padding: 0;
    }
    .header-divider {
      flex: 0 0 auto;
      width: 1px;
      height: 28px;
      background: var(--border);
    }
    .app-header .brand-lockup {
      justify-self: start;
    }
    .app-header .panel-tools {
      justify-self: end;
      justify-content: flex-end;
    }
    .app-header .user-chip {
      min-height: 36px;
      padding: 3px 2px 3px 8px;
      border: 0;
      background: transparent;
    }
    .theme-button {
      min-width: auto;
      height: 36px;
      width: 38px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-soft);
      color: var(--text);
      box-shadow: none;
      font-size: 12px;
    }
    .theme-button svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .logout-link {
      display: inline-grid;
      place-items: center;
      height: 36px;
      width: 38px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-soft);
      color: var(--text);
      text-decoration: none;
      white-space: nowrap;
    }
    .logout-link svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .logout-link:hover {
      color: var(--danger);
      border-color: rgba(185, 28, 28, 0.22);
    }
    .accordion-toggle {
      display: none;
      min-width: auto;
      width: 36px;
      height: 34px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-soft);
      color: var(--text);
      box-shadow: none;
    }
    .accordion-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 220ms cubic-bezier(.2, .75, .25, 1);
    }
    .panel.is-accordion-animating { overflow: hidden !important; }
    .panel:not(.mobile-collapsed) > .panel-heading .accordion-toggle svg {
      transform: rotate(180deg);
    }
    .meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .meta div {
      display: grid;
      gap: 2px;
      min-height: 70px;
      padding: 11px 12px;
      background: var(--panel-soft);
      border: 1px solid #e8edf2;
      border-radius: 8px;
      color: var(--muted);
      font-size: 12px;
    }
    .meta strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    body.dark .meta div {
      border-color: var(--border);
    }
    .status-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .symbol-status-content {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
    }
    .symbol-identity {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-width: 0;
      overflow: hidden;
      padding: 16px 17px 14px;
      border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
      border-radius: 17px;
      background: linear-gradient(
        118deg,
        color-mix(in srgb, var(--primary) 12%, var(--panel)) 0%,
        color-mix(in srgb, #14b8a6 7%, var(--panel-soft)) 58%,
        var(--panel) 100%
      );
    }
    .symbol-identity::before {
      content: "";
      position: absolute;
      inset-block: 12px;
      inset-inline-start: 0;
      width: 3px;
      border-radius: 999px;
      background: var(--primary);
      transition: background-color 0.18s ease;
    }
    .status-panel.status-positive .symbol-identity::before {
      background: var(--success);
    }
    .status-panel.status-negative .symbol-identity::before {
      background: var(--danger);
    }
    .symbol-identity-copy {
      display: grid;
      gap: 4px;
      width: 100%;
      min-width: 0;
    }
    .symbol-identity-row {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .symbol-identity-copy strong {
      display: inline-block;
      margin: 0;
      color: var(--text);
      font-size: 28px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .symbol-identity-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .symbol-industry-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      min-height: 28px;
      padding: 3px 11px;
      border: 1px solid color-mix(in srgb, #14b8a6 20%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, #14b8a6 11%, var(--panel));
      color: color-mix(in srgb, #0891b2 78%, var(--text));
      font-size: 11px;
      font-weight: 800;
      line-height: 1.5;
    }
    .symbol-price-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
      border-radius: 15px;
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary) 5%, var(--panel)),
        var(--panel-soft)
      );
    }
    .symbol-price-card {
      min-width: 0;
      padding: 14px 14px 12px;
      background: transparent;
    }
    .symbol-price-card + .symbol-price-card {
      border-inline-start: 1px solid var(--border);
    }
    .symbol-price-card span,
    .symbol-fundamental-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.55;
    }
    .symbol-price-value-row {
      display: flex;
      align-items: baseline;
      gap: 5px;
      width: 100%;
      min-width: 0;
      margin-top: 5px;
      flex-wrap: nowrap;
    }
    .symbol-price-card strong {
      display: inline-block;
      flex: 1 1 auto;
      min-width: 0;
      color: var(--text);
      font-size: clamp(17px, 1.45vw, 21px);
      line-height: 1.35;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .symbol-price-change {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--panel);
      color: var(--muted);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.4;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    @keyframes price-tick-up {
      0% { background-color: rgba(106, 153, 78, 0.24); }
      100% { background-color: transparent; }
    }
    @keyframes price-tick-down {
      0% { background-color: rgba(217, 119, 6, 0.22); }
      100% { background-color: transparent; }
    }
    .symbol-price-card.price-tick-up,
    .symbol-fundamental-card.price-tick-up {
      animation: price-tick-up 700ms ease-out;
    }
    .symbol-price-card.price-tick-down,
    .symbol-fundamental-card.price-tick-down {
      animation: price-tick-down 700ms ease-out;
    }
    .symbol-price-card.is-positive strong,
    .symbol-price-card.is-positive .symbol-price-change {
      color: var(--success);
    }
    .symbol-price-card.is-positive .symbol-price-change {
      background: color-mix(in srgb, var(--success) 11%, var(--panel));
    }
    .symbol-price-card.is-negative strong,
    .symbol-price-card.is-negative .symbol-price-change {
      color: var(--danger);
    }
    .symbol-price-card.is-negative .symbol-price-change {
      background: color-mix(in srgb, var(--danger) 10%, var(--panel));
    }
    .symbol-price-card small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 10px;
    }
    .symbol-market-overview {
      display: grid;
      gap: 10px;
      min-width: 0;
    }
    .symbol-market-cap-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid color-mix(in srgb, #0891b2 18%, var(--border));
      border-radius: 15px;
      background: color-mix(in srgb, #0891b2 5%, var(--panel-soft));
    }
    .symbol-market-cap-grid[hidden] {
      display: none !important;
    }
    .symbol-market-cap-card {
      min-width: 0;
      padding: 10px 12px;
      text-align: center;
    }
    .symbol-market-cap-card + .symbol-market-cap-card {
      border-inline-start: 1px solid var(--border);
    }
    .symbol-market-cap-card span,
    .symbol-market-cap-rate {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.5;
    }
    .symbol-market-cap-card strong {
      display: block;
      margin-top: 4px;
      color: var(--text);
      font-size: 16px;
      line-height: 1.4;
      white-space: nowrap;
    }
    .symbol-market-cap-rate {
      grid-column: 1 / -1;
      padding: 5px 8px;
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .symbol-fundamental-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 15px;
      background: color-mix(in srgb, var(--panel-soft) 86%, var(--panel));
    }
    .symbol-fundamental-grid[hidden] {
      display: none !important;
    }
    .symbol-fundamental-card {
      display: flex;
      min-width: 0;
      min-height: 82px;
      flex-direction: column;
      justify-content: center;
      padding: 10px 8px;
      border: 0;
      background: transparent;
      text-align: center;
    }
    .symbol-fundamental-card + .symbol-fundamental-card {
      border-inline-start: 0;
    }
    .symbol-fundamental-card:nth-child(even) {
      border-inline-start: 1px solid var(--border);
    }
    .symbol-fundamental-card:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }
    .symbol-fundamental-card strong {
      display: block;
      margin-top: 5px;
      color: var(--text);
      font-size: 17px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .symbol-fundamental-card.is-positive strong {
      color: var(--success);
    }
    .symbol-fundamental-card.is-negative strong {
      color: var(--danger);
    }
    .pe-comparison-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      min-height: 20px;
      margin: 5px auto 0;
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--panel);
      color: var(--muted);
      font-size: 9px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.45;
    }
    .pe-comparison-badge.is-below {
      background: color-mix(in srgb, var(--success) 11%, var(--panel));
      color: var(--success);
    }
    .pe-comparison-badge.is-above {
      background: color-mix(in srgb, #d97706 12%, var(--panel));
      color: #b45309;
    }
    body.dark .pe-comparison-badge.is-above {
      color: #fbbf24;
    }
    .symbol-source-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    }
    .symbol-source-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 0;
      min-height: 38px;
      padding: 7px 10px;
      border: 1px solid color-mix(in srgb, var(--primary) 19%, var(--border));
      border-radius: 11px;
      background: transparent;
      color: var(--primary-dark);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.5;
      text-decoration: none;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }
    .mobile-price-unit {
      display: none;
    }
    .symbol-source-link:hover {
      border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
      background: color-mix(in srgb, var(--primary) 10%, var(--panel));
      text-decoration: none;
      transform: translateY(-1px);
    }
    .symbol-source-link.is-disabled {
      color: var(--muted);
      pointer-events: none;
      opacity: 0.62;
    }
    .fund-holdings-panel {
      display: flex;
      grid-column: 1 / -1;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      overflow: hidden;
    }
    .fund-allocation-panel {
      display: flex;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      overflow: hidden;
    }
    #overviewSection > .fund-allocation-panel,
    #overviewSection > .fund-flow-panel,
    #overviewSection > .fund-holdings-panel {
      margin-top: 0;
    }
    .fund-allocation-panel[hidden] {
      display: none !important;
    }
    .fund-valuation-panel {
      grid-column: 1 / -1;
      min-width: 0;
      overflow: hidden;
    }
    .fund-valuation-panel[hidden] {
      display: none !important;
    }
    .fund-valuation-panel .panel-heading {
      margin-bottom: 12px;
    }
    .fund-valuation-panel .panel-heading h2 {
      margin-bottom: 2px;
      font-size: 17px;
    }
    .fund-valuation-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--panel-soft) 70%, var(--panel));
    }
    .fund-valuation-card {
      display: flex;
      min-width: 0;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      min-height: 108px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 8px 11px;
      border-inline-start: 1px solid var(--border);
      text-align: center;
    }
    .fund-valuation-card:first-child {
      border-inline-start: 0;
    }
    .fund-valuation-card span,
    .fund-valuation-card small {
      display: block;
      color: var(--muted);
      font-weight: 750;
      line-height: 1.55;
    }
    .fund-valuation-card span {
      min-height: 0;
      font-size: 11px;
      text-align: center;
    }
    .fund-valuation-card strong {
      display: block;
      width: 100%;
      margin-top: 2px;
      color: var(--text);
      font-size: 20px;
      font-weight: 950;
      line-height: 1.3;
    }
    .fund-valuation-card small {
      margin-top: 4px;
      font-size: 8px;
    }
    .fund-valuation-card.is-positive strong { color: var(--success); }
    .fund-valuation-card.is-negative strong { color: var(--danger); }
    .fund-valuation-card.is-positive strong::before { content: '↑ '; }
    .fund-valuation-card.is-negative strong::before { content: '↓ '; }
    @media (max-width: 1100px) {
      .fund-valuation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .fund-valuation-card:nth-child(4) { border-inline-start: 0; }
      .fund-valuation-card:nth-child(n + 4) { border-top: 1px solid var(--border); }
    }
    .fund-allocation-grid {
      display: grid;
      flex: 1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-height: 0;
    }
    .fund-allocation-card {
      display: flex;
      min-width: 0;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      min-height: 350px;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: color-mix(in srgb, var(--panel-soft) 55%, var(--panel));
    }
    .fund-allocation-card h3 {
      margin: 0;
      padding: 13px 12px 7px;
      color: var(--text);
      font-size: 16px;
      font-weight: 950;
      line-height: 1.6;
      text-align: center;
    }
    .fund-allocation-chart {
      width: 100%;
      min-height: 310px;
      flex: 1;
      border: 0 !important;
      outline: 0 !important;
      background: transparent;
      box-shadow: none !important;
      line-height: 0;
    }
    .fund-allocation-chart > div,
    .fund-allocation-chart canvas {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }
    .fund-allocation-chart canvas {
      display: block !important;
    }
    .fund-allocation-total {
      margin: -2px 10px 11px;
      border: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
      line-height: 1.7;
      text-align: center;
    }
    .fund-allocation-total strong {
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
    }
    .fund-industry-members {
      margin-top: 10px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: color-mix(in srgb, var(--panel-soft) 58%, var(--panel));
    }
    .fund-industry-members[hidden] { display: none !important; }
    .fund-industry-members-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .fund-industry-members-head h4 {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.6;
    }
    .fund-industry-members-head p {
      margin: 1px 0 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.6;
    }
    .fund-industry-members-close {
      width: 32px;
      min-width: 32px;
      min-height: 32px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--panel);
      color: var(--muted);
      box-shadow: none;
      font-size: 18px;
      line-height: 1;
    }
    .fund-industry-members-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 7px;
      min-width: 0;
    }
    .fund-industry-member {
      display: grid;
      grid-template-columns: minmax(0, 1fr) repeat(3, auto);
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
    }
    .fund-industry-member-name { min-width: 0; }
    .fund-industry-member-name .dashboard-symbol-link {
      display: block;
      overflow: hidden;
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.55;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fund-industry-member-name small {
      display: block;
      overflow: hidden;
      color: var(--muted);
      font-size: 8px;
      font-weight: 700;
      line-height: 1.5;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fund-industry-member-metric {
      display: grid;
      gap: 1px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
      white-space: nowrap;
    }
    .fund-industry-member-metric strong {
      color: var(--text);
      font-size: 10px;
      font-weight: 900;
    }
    #fundIndustryChart.is-interactive { cursor: pointer; }
    .fund-flow-panel {
      display: flex;
      grid-column: 1 / -1;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      overflow: hidden;
    }
    .fund-flow-panel[hidden] { display: none !important; }
    .fund-flow-panel .panel-heading { margin-bottom: 12px; }
    .fund-flow-card[hidden] { display: none !important; }
    .fund-flow-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .fund-flow-card {
      display: flex;
      min-width: 0;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      min-height: 350px;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: color-mix(in srgb, var(--panel-soft) 55%, var(--panel));
    }
    .fund-flow-card h3 {
      margin: 0;
      padding: 12px 8px 4px;
      color: var(--text);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.65;
      text-align: center;
    }
    .fund-flow-chart {
      width: 100%;
      min-height: 285px;
      flex: 1;
      border: 0 !important;
      outline: 0 !important;
      background: transparent;
      line-height: 0;
    }
    .fund-flow-chart canvas {
      display: block !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }
    .fund-flow-total {
      margin: 0 8px 10px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 750;
      line-height: 1.7;
      text-align: center;
    }
    .fund-flow-total strong {
      color: var(--text);
      font-size: 11px;
      font-weight: 900;
    }
    @media (max-width: 1100px) {
      .fund-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .fund-changes-panel {
      grid-column: 1 / -1;
      min-width: 0;
    }
    .fund-changes-panel[hidden] { display: none !important; }
    .fund-change-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .fund-change-kpis article {
      display: grid;
      min-height: 78px;
      place-content: center;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--panel-soft);
      text-align: center;
    }
    .fund-change-kpis span,
    .fund-change-kpis small { color: var(--muted); font-size: 10px; font-weight: 750; }
    .fund-change-kpis strong { color: var(--text); font-size: 19px; font-weight: 950; }
    .fund-change-kpis small.is-positive,
    .fund-change-value.is-positive { color: var(--success); }
    .fund-change-kpis small.is-negative,
    .fund-change-kpis strong.is-negative,
    .fund-change-value.is-negative { color: var(--danger); }
    .fund-change-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .fund-change-card {
      min-width: 0;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: color-mix(in srgb, var(--panel-soft) 65%, var(--panel));
    }
    .fund-change-card h3 { margin: 0 0 10px; color: var(--text); font-size: 13px; }
    .fund-change-card h4 { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
    .fund-change-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fund-change-list { display: grid; gap: 5px; }
    .fund-change-list.is-scrollable,
    .fund-change-allocation.is-scrollable {
      max-height: 182px;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 4px 4px 4px 12px;
      border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
      border-radius: 11px;
      background: color-mix(in srgb, var(--primary) 3%, var(--panel));
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 45%, transparent),
        inset 0 -12px 18px -20px color-mix(in srgb, var(--primary) 55%, transparent);
      scrollbar-gutter: stable;
      scrollbar-width: none;
    }
    .fund-change-list.is-scrollable::-webkit-scrollbar,
    .fund-change-allocation.is-scrollable::-webkit-scrollbar {
      display: none;
    }
    .has-fund-change-scroll-indicator {
      position: relative;
    }
    .fund-change-scroll-rail {
      position: absolute;
      z-index: 3;
      width: 6px;
      border: 0;
      border-radius: 999px;
      background: color-mix(in srgb, var(--primary) 9%, var(--panel-soft));
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
        0 1px 3px color-mix(in srgb, var(--text) 8%, transparent);
      cursor: pointer;
      opacity: 0.92;
      touch-action: none;
      transition: width 160ms ease, background-color 160ms ease, opacity 160ms ease;
    }
    .fund-change-scroll-rail:hover {
      width: 8px;
      background: color-mix(in srgb, var(--primary) 14%, var(--panel-soft));
      opacity: 1;
    }
    .fund-change-scroll-thumb {
      position: absolute;
      inset-inline: 1px;
      top: 0;
      min-height: 34px;
      border: 1px solid color-mix(in srgb, white 22%, transparent);
      border-radius: 999px;
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 76%, white),
        color-mix(in srgb, var(--primary) 88%, var(--primary-dark))
      );
      box-shadow:
        0 2px 7px color-mix(in srgb, var(--primary) 34%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
      cursor: grab;
      transition: background 160ms ease, box-shadow 160ms ease;
    }
    .fund-change-scroll-rail:hover .fund-change-scroll-thumb {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 66%, white),
        var(--primary)
      );
      box-shadow:
        0 3px 10px color-mix(in srgb, var(--primary) 44%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 38%, transparent);
    }
    .fund-change-scroll-thumb:active {
      cursor: grabbing;
      background: var(--primary-dark);
    }
    @media (pointer: coarse) {
      .fund-change-scroll-rail { width: 8px; }
    }
    .fund-change-item,
    .fund-change-allocation-item {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 6px 7px;
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      font-size: 12px;
      font-weight: 750;
    }
    .fund-change-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fund-change-value { flex: 0 0 auto; direction: ltr; font-weight: 900; }
    .fund-change-empty { padding: 8px; color: var(--muted); font-size: 10px; text-align: center; }
    .fund-change-allocation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .fund-change-allocation-copy { display: grid; min-width: 0; }
    .fund-change-allocation-copy small { color: var(--muted); font-size: 10px; }
    .fund-holdings-panel[hidden] {
      display: none !important;
    }
    .fund-holdings-panel {
      overflow-anchor: none;
    }
    .fund-holdings-panel .panel-heading {
      align-items: center;
      margin-bottom: 10px;
    }
    .fund-holdings-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .fund-holdings-shell {
      min-height: 0;
      overflow: hidden;
      overflow-anchor: none;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: color-mix(in srgb, var(--panel-soft) 72%, var(--panel));
    }
    .fund-holdings-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      direction: ltr;
      gap: 10px;
      margin-bottom: 9px;
    }
    .fund-holding-search {
      position: relative;
      flex: 0 1 220px;
      min-width: 170px;
      direction: rtl;
    }
    .fund-holding-search input {
      width: 100%;
      min-height: 33px;
      padding: 5px 32px 5px 10px;
      border: 1px solid var(--border);
      border-radius: 9px;
      outline: none;
      background: var(--panel);
      color: var(--text);
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .fund-holding-search input::placeholder { color: var(--muted); }
    .fund-holding-search input:focus {
      border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
    }
    .fund-holding-search::before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 11px;
      width: 11px;
      height: 11px;
      border: 1.7px solid var(--muted);
      border-radius: 50%;
      pointer-events: none;
      transform: translateY(-58%);
    }
    .fund-holding-search::after {
      content: '';
      position: absolute;
      z-index: 1;
      top: calc(50% + 4px);
      right: 20px;
      width: 5px;
      height: 1.7px;
      border-radius: 2px;
      background: var(--muted);
      pointer-events: none;
      transform: rotate(45deg);
      transform-origin: right center;
    }
    .fund-holding-tabs {
      min-width: 0;
      max-width: 100%;
      direction: rtl;
      justify-content: flex-start;
    }
    .fund-holding-tab {
      flex: 0 0 auto;
    }
    .stock-fund-owner-type-head {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .stock-fund-owners-panel {
      margin-top: 16px;
    }
    body.dark .stock-fund-owners-table,
    html[data-theme="dark"] body .stock-fund-owners-table {
      background-color: color-mix(in srgb, var(--panel-soft) 72%, var(--panel));
      background-image: none;
    }
    body.dark .stock-fund-owners-table table,
    body.dark .stock-fund-owners-table tbody tr,
    html[data-theme="dark"] body .stock-fund-owners-table table,
    html[data-theme="dark"] body .stock-fund-owners-table tbody tr {
      background: var(--panel);
    }
    body.dark .stock-fund-owners-table th,
    html[data-theme="dark"] body .stock-fund-owners-table th {
      background: color-mix(in srgb, var(--text) 6%, var(--panel));
    }
    body.dark .stock-fund-owners-table tbody tr:hover,
    html[data-theme="dark"] body .stock-fund-owners-table tbody tr:hover {
      background: color-mix(in srgb, var(--primary) 4%, var(--panel));
    }
    @media (max-width: 980px) {
      body.dark .stock-fund-owners-table td:first-child,
      html[data-theme="dark"] body .stock-fund-owners-table td:first-child {
        background: var(--panel);
      }
      body.dark .stock-fund-owners-table th:first-child,
      html[data-theme="dark"] body .stock-fund-owners-table th:first-child {
        background: color-mix(in srgb, var(--text) 6%, var(--panel));
      }
    }
    .stock-fund-owners-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 12px;
    }
    .stock-owner-source-tabs {
      flex: 0 0 auto;
      direction: rtl;
    }
    .stock-fund-owner-search {
      width: min(100%, 320px);
      min-height: 38px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--panel);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      padding: 8px 12px;
    }
    .dashboard-symbol-link {
      color: inherit;
      font-weight: inherit;
      text-decoration: none;
      text-decoration-line: none !important;
      cursor: pointer;
    }
    .dashboard-symbol-link:hover,
    .dashboard-symbol-link:active,
    .dashboard-symbol-link:visited {
      color: inherit;
      text-decoration: none;
      text-decoration-line: none !important;
    }
    .dashboard-symbol-link:focus-visible {
      color: inherit;
      text-decoration: none;
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    .stock-owner-change-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 78px;
      padding: 4px 8px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }
    .stock-owner-change-badge.is-positive { color: var(--success); }
    .stock-owner-change-badge.is-negative { color: var(--danger); }
    .stock-owner-change-badge.is-new { color: var(--primary-dark); }
    .stock-fund-owner-filter-button {
      width: 28px;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      color: var(--muted);
      box-shadow: none;
    }
    .stock-fund-owner-filter-button:hover,
    .stock-fund-owner-filter-button.is-filtered {
      border-color: var(--primary);
      color: var(--primary-dark);
      background: color-mix(in srgb, var(--primary) 8%, var(--panel));
    }
    .stock-fund-owner-filter-button svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .stock-fund-owner-filter-menu {
      position: fixed;
      z-index: var(--z-modal);
      display: grid;
      gap: 5px;
      width: min(260px, calc(100vw - 24px));
      max-height: min(360px, calc(100vh - 24px));
      overflow-y: auto;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: var(--panel);
      color: var(--text);
      box-shadow: 0 18px 45px rgba(15, 23, 42, .2);
    }
    .stock-fund-owner-filter-menu[hidden] { display: none; }
    .stock-fund-owner-filter-menu strong {
      padding: 2px 4px 7px;
      font-size: 12px;
    }
    .stock-fund-owner-filter-option {
      display: flex;
      grid-template-columns: none;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 5px 7px;
      border-radius: 8px;
      color: var(--text);
      font-size: 11px;
      cursor: pointer;
    }
    .stock-fund-owner-filter-option:hover { background: var(--panel-soft); }
    .stock-fund-owner-filter-option input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--primary);
    }
    .stock-fund-owners-count {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }
    .fund-holding-mobile-sort {
      display: none;
      flex: 0 0 auto;
      align-items: center;
      direction: rtl;
      gap: 4px;
    }
    .fund-holding-mobile-sort select,
    .fund-holding-sort-direction {
      min-height: 31px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      font: inherit;
      font-size: 9px;
      font-weight: 750;
    }
    .fund-holding-mobile-sort select { max-width: 92px; padding: 4px 7px; }
    .fund-holding-sort-direction {
      width: 31px;
      padding: 0;
      cursor: pointer;
    }
    .fund-holdings-head,
    .fund-holding-row {
      display: grid;
      grid-template-columns: minmax(130px, 1.25fr) minmax(70px, .62fr) minmax(84px, .75fr) minmax(100px, .9fr) minmax(96px, .85fr) minmax(96px, .85fr) minmax(110px, .95fr) minmax(80px, .72fr);
      gap: 8px;
      align-items: center;
      text-align: center;
    }
    .fund-holdings-head {
      position: sticky;
      z-index: 3;
      top: 0;
      min-height: 38px;
      padding: 7px 11px;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--text) 6%, var(--panel));
      color: var(--text);
      font-size: 13px;
      font-weight: 900;
      box-shadow: none !important;
      filter: none !important;
      text-shadow: none !important;
    }
    .fund-holdings-head::before,
    .fund-holdings-head::after,
    .fund-holdings-head > *,
    .fund-sort-button {
      box-shadow: none !important;
      filter: none !important;
      text-shadow: none !important;
    }
    .fund-holdings-head > span,
    .fund-sort-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      gap: 4px;
      text-align: center;
    }
    .fund-sort-button {
      padding: 3px 2px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }
    .fund-sort-button:hover,
    .fund-sort-button.is-active { color: var(--text); }
    .fund-sort-indicator {
      min-width: 9px;
      font-size: 9px;
      opacity: .58;
    }
    .fund-sort-button.is-active .fund-sort-indicator { opacity: 1; }
    .fund-holdings-list {
      overflow-anchor: none;
      max-height: 438px;
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    .fund-holding-row {
      min-height: 58px;
      padding: 8px 11px;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
      background: var(--panel);
      transition: background-color .15s ease;
    }
    .fund-holding-row:last-child {
      border-bottom: 0;
    }
    .fund-holding-row:hover {
      background: color-mix(in srgb, var(--primary) 4%, var(--panel));
    }
    .fund-holding-name {
      display: grid;
      justify-items: center;
      min-width: 0;
      text-align: center;
    }
    .fund-holding-name strong {
      display: block;
      overflow: hidden;
      color: var(--text);
      font-size: 13px;
      line-height: 1.55;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fund-holding-full-name {
      display: block;
      max-width: 100%;
      overflow: hidden;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.45;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fund-asset-type {
      display: inline-flex;
      width: fit-content;
      margin-top: 3px;
      padding: 1px 6px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }
    .fund-holding-cell {
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 750;
      text-align: center;
      white-space: nowrap;
    }
    .fund-holding-cell.is-positive { color: var(--success); }
    .fund-holding-cell.is-negative { color: var(--danger); }
    .fund-holding-mobile-details { display: none; }
    .fund-holding-empty {
      display: grid;
      min-height: 210px;
      place-items: center;
      padding: 24px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.9;
      text-align: center;
    }
    body.fund-report .summary-grid,
    body.fund-report .summary-pagination {
      display: none !important;
    }
    @media (max-width: 560px) {
      .symbol-status-content {
        gap: 9px;
      }
      .symbol-identity {
        gap: 10px;
      }
      .symbol-identity-copy strong {
        font-size: 24px;
      }
      .symbol-identity-copy p {
        margin-bottom: 6px;
        font-size: 12px;
      }
      .symbol-industry-badge {
        min-height: 25px;
        padding: 2px 9px;
        font-size: 10px;
      }
      .symbol-price-grid {
        gap: 7px;
      }
      .symbol-price-card {
        padding: 10px 9px;
        border-radius: 12px;
      }
      .symbol-price-card strong {
        font-size: 18px;
      }
      .symbol-fundamental-grid {
        gap: 6px;
      }
      .symbol-fundamental-card {
        min-height: 82px;
        padding: 8px 4px;
        border-radius: 11px;
      }
      .symbol-fundamental-card span {
        font-size: 12px;
      }
      .symbol-fundamental-card strong {
        font-size: 15px;
      }
      .pe-comparison-badge {
        min-height: 18px;
        padding-inline: 4px;
        font-size: 8px;
      }
      .symbol-source-actions {
        gap: 6px;
      }
      .symbol-source-link {
        min-height: 36px;
        padding-inline: 6px;
        font-size: 12px;
      }
    }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .summary-card {
      min-width: 0;
      padding: 13px 14px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04);
      position: relative;
      overflow: hidden;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .summary-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--primary);
      opacity: 0.75;
    }
    .summary-card span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .summary-card strong {
      display: block;
      color: var(--text);
      font-size: clamp(17px, 1.6vw, 24px);
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .summary-card em {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-style: normal;
      font-size: 11px;
    }
    .summary-card.positive strong,
    .metric-positive { color: var(--success); }
    .summary-card.negative strong,
    .metric-negative { color: var(--danger); }
    .insight-nav {
      display: flex;
      gap: 8px;
      align-items: center;
      overflow-x: auto;
      margin-top: 12px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04);
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .insight-nav::-webkit-scrollbar { display: none; }
    .insight-nav button {
      min-width: auto;
      height: 34px;
      white-space: nowrap;
      padding: 0 12px;
      border-radius: 6px;
      border: 1px solid transparent;
      background: var(--panel-soft);
      color: var(--muted);
      box-shadow: none;
      font-size: 12px;
      transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
        box-shadow 160ms ease, transform 160ms ease;
    }
    .insight-nav button:hover {
      color: var(--primary-dark);
      border-color: var(--border);
      background: var(--panel);
    }
    .insight-nav button.active {
      color: var(--on-button-primary);
      border-color: var(--button-primary);
      background: var(--button-primary);
      box-shadow: 0 7px 16px rgba(31, 111, 235, 0.18);
    }
    .material-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .segmented {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-soft);
      flex-wrap: wrap;
    }
    .segmented[hidden] {
      display: none !important;
    }
    .segment-button {
      min-width: auto;
      height: 32px;
      padding: 0 10px;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      font-size: 12px;
      transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease,
        transform 160ms ease;
    }
    .segment-button:active,
    .insight-nav button:active { transform: scale(.97); }
    .segment-button:hover,
    .segment-button.active {
      background: var(--panel);
      color: var(--primary-dark);
      box-shadow: 0 2px 8px rgba(23, 32, 51, 0.08);
    }
    body.dark .segment-button:hover,
    body.dark .segment-button.active {
      background: #0b1220;
    }
    .links-title {
      margin: 16px 0 7px;
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
    }
    ul {
      margin: 0;
      padding: 0 18px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    li + li { margin-top: 5px; }
    a {
      color: var(--primary-dark);
      text-decoration: none;
      font-weight: 800;
    }
    a:hover { text-decoration: underline; }
    .chart-canvas {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 520px;
      border: 1px solid #e4e9ef;
      border-radius: 8px;
      background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
      overflow: hidden;
    }
    .chart-note {
      color: var(--muted);
      font-size: 12px;
      margin-top: 8px;
      overflow-wrap: anywhere;
    }
    .chart-note:empty { display: none; }
    .chart-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .chart-unit-badge {
      display: inline-flex;
      min-height: 32px;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
      border-radius: 8px;
      background: color-mix(in srgb, var(--primary) 9%, var(--panel));
      color: var(--primary-dark);
      font-size: 11px;
      font-weight: 900;
    }
    .toggle {
      display: inline-grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .toggle input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      width: 1px;
      height: 1px;
      margin: 0;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      opacity: 0;
      pointer-events: none;
    }
    .toggle-switch {
      position: relative;
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: #d8e0e8;
      border: 1px solid #c5d0dc;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .toggle-switch::after {
      content: "";
      position: absolute;
      top: 3px;
      right: 3px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: var(--panel);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
      transition: transform 0.15s ease;
    }
    .toggle input:checked + .toggle-switch {
      background: var(--primary);
      border-color: var(--primary);
    }
    .toggle input:checked + .toggle-switch::after {
      transform: translateX(-18px);
    }
    .product-panel { margin-top: 16px; }
    .product-controls {
      display: grid;
      grid-template-columns: minmax(290px, 390px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      min-width: 0;
    }
    .product-controls > div { min-width: 0; }
    .product-chart-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      min-width: 0;
    }
    .energy-layout {
      display: grid;
      grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr);
      gap: 16px;
      align-items: start;
    }
    .energy-card {
      display: grid;
      gap: 12px;
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-soft);
    }
    .energy-card .chart-canvas {
      height: 480px;
      background: var(--panel);
    }
    .investment-tabs {
      display: flex;
      justify-content: flex-end;
      margin: 2px 0 14px;
    }
    .investment-pane { display: none; }
    .investment-pane.active { display: block; }
    .investment-layout {
      display: grid;
      gap: 16px;
      min-width: 0;
    }
    .investment-composition-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
      gap: 14px;
      align-items: stretch;
      min-width: 0;
    }
    .investment-composition-grid .chart-canvas {
      height: 440px;
    }
    .investment-table-card {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: color-mix(in srgb, var(--panel-soft) 72%, var(--panel));
      overflow: hidden;
    }
    .investment-table-card table {
      min-width: 520px;
      width: 100%;
      table-layout: fixed;
      font-size: 12px;
      background: var(--panel);
    }
    .investment-table-card th:first-child,
    .investment-table-card td:first-child {
      width: 32%;
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .investment-table-card td:first-child .dashboard-symbol-link {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .investment-table-card thead th {
      position: sticky;
      z-index: 2;
      top: 0;
      background: color-mix(in srgb, var(--text) 6%, var(--panel));
      color: var(--text);
      box-shadow: none;
      text-shadow: none;
    }
    .investment-table-card tbody tr {
      background: var(--panel);
      transition: background-color .15s ease;
    }
    .investment-table-card tbody tr:hover {
      background: color-mix(in srgb, var(--primary) 4%, var(--panel));
    }
    .investment-change {
      display: grid;
      gap: 2px;
      justify-items: center;
      white-space: nowrap;
    }
    .investment-change-buy { color: var(--success); }
    .investment-change-sale { color: var(--danger); }
    .investment-change-empty { color: var(--muted); }
    .investment-table-card .scroll-table {
      border: 0;
      border-radius: 0;
      max-height: 438px;
    }
    .investment-trade-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      min-width: 0;
    }
    .investment-growth-card {
      margin-top: 16px;
    }
    .energy-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .energy-card-head h3 {
      margin: 0;
      font-size: 14px;
      line-height: 1.7;
    }
    .energy-card-head p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
    }
    .product-picker {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-soft);
      overflow: hidden;
    }
    .product-picker-head {
      padding: 12px;
      border-bottom: 1px solid var(--border);
      background: var(--panel);
    }
    .product-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .mini-button {
      min-width: auto;
      height: 34px;
      padding: 0 11px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--panel-soft);
      color: var(--text);
      box-shadow: none;
      font-size: 12px;
    }
    .mini-button.icon-only {
      width: 36px;
      padding: 0;
      display: inline-grid;
      place-items: center;
    }
    .mini-button svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .mini-button:hover { background: #e8eef5; }
    body.dark .mini-button:hover { background: #1d2d45; }
    .selected-count {
      color: var(--muted);
      font-size: 12px;
      margin-inline-start: auto;
    }
    .data-table-wrap {
      width: 100%;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--table-bg);
    }
    .scroll-table {
      max-height: 430px;
      overflow: auto;
    }
    table {
      width: 100%;
      min-width: 880px;
      border-collapse: collapse;
      font-size: 13px;
      white-space: nowrap;
    }
    th, td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--table-line);
      text-align: right;
    }
    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--table-head);
      color: var(--text);
      font-weight: 800;
    }
    tbody tr:hover { background: var(--hover); }
    .selected-peer-row {
      background: rgba(245, 158, 11, 0.1);
      font-weight: 800;
    }
    body.dark .selected-peer-row {
      background: rgba(245, 158, 11, 0.16);
    }
    td.growth-cell {
      border-inline-start: 1px solid rgba(255, 255, 255, 0.65);
      font-weight: 800;
    }
    .table-more {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
    .arrow-button {
      min-width: auto;
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 999px;
      background: #f1f5f9;
      color: var(--primary-dark);
      border: 1px solid var(--border);
      box-shadow: none;
      font-size: 18px;
      line-height: 1;
    }
    .arrow-button:hover { background: #e8eef5; }
    body.dark .arrow-button { background: var(--panel-soft); }
    body.dark .arrow-button:hover { background: #1d2d45; }
    .compare-panel { margin-top: 16px; }
    .product-panel + #costsSection + .energy-panel {
      margin-top: 16px;
    }
    .compare-controls {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 2px 0 14px;
    }
    .compare-controls .compare-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      max-width: 100%;
    }
    .compare-controls .segmented {
      width: auto;
      max-width: 100%;
      justify-content: center;
    }
    .compare-panel .compact-summary {
      display: grid;
      grid-template-columns: repeat(6, minmax(118px, 1fr));
      gap: 8px;
      margin: 4px 0 14px;
    }
    .compare-panel .compact-summary .summary-card {
      padding: 9px 10px;
      min-height: 86px;
    }
    .compare-panel .compact-summary .summary-card span {
      margin-bottom: 4px;
      font-size: 11px;
    }
    .compare-panel .compact-summary .summary-card strong {
      font-size: 15px;
      line-height: 1.45;
    }
    .compare-panel .compact-summary .summary-card em {
      font-size: 10.5px;
    }
    .comparison-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .peer-distribution-card {
      margin-top: 16px;
    }
    .peer-distribution-card .chart-canvas {
      height: 420px;
    }
    #peerGrowthScatterChart {
      height: 500px;
    }
    .peer-quadrant-card {
      margin-top: 16px;
    }
    .peer-quadrant-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .peer-quadrant {
      min-width: 0;
      display: grid;
      gap: 8px;
      padding: 11px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      border-top: 3px solid var(--quadrant-color, var(--border-strong));
      overflow: hidden;
    }
    .peer-quadrant-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .peer-quadrant h4 {
      margin: 0;
      font-size: 13px;
      line-height: 1.7;
    }
    .peer-quadrant-count {
      min-width: 32px;
      height: 26px;
      display: inline-grid;
      place-items: center;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
    }
    .peer-quadrant p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.8;
    }
    .peer-quadrant-symbols {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      align-content: flex-start;
      min-height: 64px;
    }
    .peer-symbol-chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      max-width: 100%;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--panel-soft);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 11px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .peer-symbol-chip.selected {
      background: rgba(245, 158, 11, 0.16);
      border-color: rgba(245, 158, 11, 0.5);
      color: #92400e;
    }
    .peer-quadrant-more {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }
    .peer-table-wrap {
      max-height: 472px;
    }
    .peer-table-wrap table {
      min-width: 980px;
    }
    th.sortable {
      cursor: pointer;
      user-select: none;
    }
    th.sortable::after {
      content: "↕";
      display: inline-block;
      margin-inline-start: 6px;
      color: var(--muted);
      font-size: 11px;
    }
    th.sortable.sort-asc::after {
      content: "↑";
      color: var(--primary);
    }
    th.sortable.sort-desc::after {
      content: "↓";
      color: var(--primary);
    }
    .product-chart { display: none; }
    .product-chart.active { display: block; }
    .product-list {
      max-height: 342px;
      overflow: auto;
      padding: 8px;
    }
    .product-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      padding: 9px;
      border: 1px solid transparent;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .product-option:hover {
      background: #eef5ff;
      border-color: #d7e6ff;
    }
    body.dark .product-option:hover,
    body.dark .product-option:focus-within {
      background: #eef5ff;
      border-color: #bfd5f4;
    }
    body.dark .product-option:hover strong,
    body.dark .product-option:focus-within strong {
      color: #172033;
    }
    body.dark .product-option:hover span,
    body.dark .product-option:focus-within span {
      color: #475569;
    }
    .product-option input {
      width: 16px;
      height: 16px;
      margin-top: 7px;
      accent-color: var(--primary);
    }
    .product-option strong {
      display: block;
      color: var(--text);
      font-size: 13px;
      line-height: 1.7;
      overflow-wrap: anywhere;
    }
    .product-option span {
      color: var(--muted);
      font-size: 12px;
    }
    .log-panel { margin-top: 16px; }
    pre {
      direction: rtl;
      white-space: pre-wrap;
      overflow: auto;
      max-height: 330px;
      margin: 0;
      padding: 14px;
      background: #111827;
      color: #e5edf6;
      border: 1px solid #253043;
      border-radius: 8px;
      font-family: 'IRANSansFaNum', Tahoma, Arial, sans-serif;
      font-size: 13px;
      line-height: 1.9;
    }
    .empty-state {
      display: grid;
      place-items: center;
      min-height: 220px;
      padding: 28px;
      border: 1px dashed var(--border-strong);
      border-radius: 8px;
      background: var(--panel-soft);
      color: var(--muted);
      text-align: center;
    }
    body.has-data .empty-state,
    body.loading .empty-state { display: none; }
    body:not(.has-data):not(.loading) .summary-grid,
    body:not(.has-data):not(.loading) main > .grid,
    body:not(.has-data):not(.loading) main > .panel {
      display: none;
    }
    body.loading .summary-card strong,
    body.loading .summary-card em,
    body.loading .chart-canvas,
    body.loading .data-table-wrap,
    body.loading .product-list {
      position: relative;
      overflow: hidden;
      color: transparent !important;
    }
    body.loading .summary-card strong::after,
    body.loading .summary-card em::after,
    body.loading .chart-canvas::after,
    body.loading .data-table-wrap::after,
    body.loading .product-list::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 45%, var(--skeleton-base) 90%);
      animation: shimmer 1.2s infinite;
      z-index: 2;
    }
    body.symbol-loading { overflow: hidden; }
    .symbol-loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: grid;
      place-items: center;
      padding: 20px;
      background: var(--bg);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .18s ease, visibility 0s linear .18s;
    }
    body.symbol-loading .symbol-loading-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }
    .symbol-loading-card {
      width: min(360px, 100%);
      padding: 28px 24px 24px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--panel);
      box-shadow: 0 24px 65px rgba(15, 23, 42, .12);
      text-align: center;
    }
    .symbol-loading-mark {
      width: 46px;
      height: 46px;
      margin: 0 auto 15px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: transparent;
      box-shadow: 0 10px 25px rgba(37, 99, 235, .12);
    }
    .symbol-loading-mark img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: inherit; }
    .symbol-loading-card strong { display: block; color: var(--text); font-size: 16px; }
    .symbol-loading-card p { min-height: 24px; margin: 4px 0 17px; color: var(--muted); font-size: 12px; }
    .symbol-loading-track {
      position: relative;
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--skeleton-base);
    }
    .symbol-loading-track::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), #14b8a6);
      animation: symbolLoadingTrack 1.05s ease-in-out infinite;
    }
    @keyframes symbolLoadingTrack {
      0% { right: -45%; }
      55% { width: 58%; }
      100% { right: 105%; width: 34%; }
    }
    .panel.ui-panel-refresh {
      animation: ui-panel-refresh 210ms cubic-bezier(.2, .75, .25, 1);
    }
    .panel.ui-panel-focus {
      animation: ui-panel-focus 360ms ease-out;
    }
    .request-error:not([hidden]),
    .empty-state:not([hidden]) {
      animation: ui-message-in 220ms cubic-bezier(.2, .75, .25, 1);
    }
    @keyframes ui-panel-refresh {
      from { opacity: .72; transform: translateY(3px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes ui-panel-focus {
      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 24%, transparent); }
      45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
      100% { box-shadow: 0 10px 28px rgba(23, 32, 51, .045); }
    }
    @keyframes ui-message-in {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .symbol-loading-track::after { animation-duration: 2.2s; }
      .symbol-loading-overlay { transition: none; }
      .symbol-suggestions.open,
      .panel.ui-panel-refresh,
      .panel.ui-panel-focus,
      .request-error:not([hidden]),
      .empty-state:not([hidden]) { animation: none !important; }
      .panel,
      .summary-card,
      .fund-change-card,
      .fund-allocation-card,
      .fund-flow-card,
      .fund-valuation-card,
      .segment-button,
      .insight-nav button,
      .accordion-toggle svg { transition: none !important; }
    }
    .empty-state strong {
      display: block;
      color: var(--text);
      font-size: 16px;
      margin-bottom: 6px;
    }
    .echarts-tooltip {
      display: inline-block !important;
      width: max-content !important;
      min-width: 0 !important;
      max-width: min(320px, calc(100% - 16px)) !important;
      box-sizing: border-box !important;
      font-family: 'IRANSansFaNum', Tahoma, Arial, sans-serif !important;
      background: rgba(255, 255, 255, 0.98) !important;
      color: #172033 !important;
      border: 1px solid #dce3ea !important;
      box-shadow: 0 14px 34px rgba(23, 32, 51, 0.16) !important;
      border-radius: 8px !important;
    }
    .echarts-tooltip * {
      font-family: 'IRANSansFaNum', Tahoma, Arial, sans-serif !important;
      color: inherit !important;
    }
    body.dark .echarts-tooltip {
      background: rgba(255, 255, 255, 0.98) !important;
      color: #111827 !important;
      border-color: #cbd5e1 !important;
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35) !important;
    }
    body.dark .echarts-tooltip,
    body.dark .echarts-tooltip * {
      color: #111827 !important;
      text-shadow: none !important;
    }
    .skeleton {
      position: relative;
      overflow: hidden;
      color: transparent !important;
      pointer-events: none;
    }
    .skeleton::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 45%, var(--skeleton-base) 90%);
      animation: shimmer 1.2s infinite;
    }
    @keyframes shimmer {
      from { transform: translateX(100%); }
      to { transform: translateX(-100%); }
    }
    @media (max-width: 980px) {
      main { width: min(100% - 24px, 760px); }
      .app-header, .toolbar, .grid, .product-controls { grid-template-columns: 1fr; }
      .energy-layout { grid-template-columns: 1fr; }
      .investment-composition-grid,
      .investment-trade-grid { grid-template-columns: 1fr; }
      .peer-quadrant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .material-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .panel-heading { flex-wrap: wrap; }
      .status { justify-self: start; }
      .toolbar > button { width: 100%; }
      .theme-button { width: 38px; }
      .chart-canvas { height: 390px; }
    }
    @media (max-width: 560px) {
      html { scroll-padding-top: 10px; }
      body {
        line-height: 1.68;
        -webkit-text-size-adjust: 100%;
      }
      main {
        width: 100%;
        margin: 0;
        padding:
          env(safe-area-inset-top, 0)
          max(10px, env(safe-area-inset-right, 0))
          max(28px, env(safe-area-inset-bottom, 0))
          max(10px, env(safe-area-inset-left, 0));
      }
      .peer-quadrant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .peer-quadrant {
        min-width: 0;
        padding: 9px;
      }
      .peer-quadrant-head {
        gap: 5px;
      }
      .peer-quadrant h4 {
        font-size: 11px;
      }
      .peer-quadrant-count {
        min-width: 26px;
        height: 24px;
        padding: 0 6px;
      }
      .compare-panel {
        overflow: hidden;
      }
      .compare-panel > *,
      .compare-panel .energy-card,
      .compare-panel .energy-layout,
      .compare-panel .peer-quadrant-card {
        min-width: 0;
        max-width: 100%;
      }
      .compare-controls {
        margin: 0 0 10px;
      }
      .compare-controls .compare-actions {
        width: 100%;
        justify-content: center;
      }
      .compare-controls .segmented {
        width: 100%;
        justify-content: center;
      }
      .compare-panel .compact-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
      }
      .compare-panel .compact-summary .summary-card {
        width: auto;
        min-width: 0;
        max-width: 100%;
      }
      .sticky-shell {
        position: relative;
        top: auto;
        padding: 8px 0 10px;
        background: var(--bg);
        backdrop-filter: none;
      }
      body.dark .sticky-shell { background: var(--bg); }
      .app-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 8px 20px rgba(23, 32, 51, 0.06);
      }
      .eyebrow {
        font-size: 11px;
        margin-bottom: 3px;
      }
      .app-title h1 {
        font-size: 17px;
        line-height: 1.45;
      }
      .app-title p { display: none; }
      .panel-tools {
        width: 100%;
        gap: 6px;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }
      .app-header .panel-tools > * { flex: 0 0 auto; }
      .app-header .status {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .logout-link {
        width: 38px;
        padding: 0;
        overflow: hidden;
      }
      .status {
        min-width: auto;
        min-height: 34px;
        padding: 5px 10px;
        font-size: 11px;
      }
      .toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 8px;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(23, 32, 51, 0.12);
      }
      .input-shell label { display: none; }
      input,
      select {
        min-height: 46px;
        font-size: 16px;
      }
      button { min-height: 44px; font-size: 14px; }
      .symbol-suggestions {
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 6px);
        max-height: min(48vh, 360px);
        border-radius: 10px;
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
      }
      .symbol-suggestion {
        height: 44px;
        font-size: 14px;
      }
      .insight-nav {
        max-width: 100%;
        margin-top: 8px;
        padding: 6px;
        gap: 6px;
        border-radius: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .insight-nav::-webkit-scrollbar { display: none; }
      .insight-nav button {
        height: 34px;
        padding: 0 11px;
        font-size: 12px;
        scroll-snap-align: start;
      }
      .empty-state {
        min-height: 180px;
        margin: 10px 0;
        padding: 22px 16px;
        border-radius: 10px;
      }
      .summary-grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 0 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
      }
      .summary-grid::-webkit-scrollbar { display: none; }
      .summary-card {
        flex: 0 0 min(82vw, 280px);
        min-width: 0;
        padding: 12px;
        scroll-snap-align: start;
      }
      .summary-card strong {
        font-size: 19px;
      }
      .grid {
        gap: 10px;
        margin-top: 10px;
      }
      .panel {
        padding: 12px;
        border-radius: 10px;
        min-height: auto;
        box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
      }
      .panel + .panel { margin-top: 10px; }
      .panel-heading {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
        align-items: start;
      }
      .panel-heading > :first-child {
        flex: 1 1 200px;
        min-width: 0;
      }
      .panel-heading > .accordion-toggle {
        flex: 0 0 40px;
        order: 2;
      }
      .panel-heading > .panel-tools {
        flex: 1 0 100%;
        order: 3;
        justify-content: stretch;
      }
      .accordion-toggle { display: inline-grid; place-items: center; }
      .mobile-collapsed > :not(.panel-heading) { display: none !important; }
      .panel-heading h2 {
        font-size: 15px;
      }
      .panel-heading p {
        font-size: 12px;
      }
      .meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .meta div {
        min-height: 62px;
        padding: 9px;
        font-size: 12px;
      }
      .meta strong {
        font-size: 15px;
      }
      .chart-actions {
        width: 100%;
        justify-content: stretch;
        gap: 8px;
        white-space: normal;
      }
      .segmented {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: visible;
      }
      .segmented::-webkit-scrollbar { display: none; }
      .segment-button {
        flex: 1 1 92px;
        width: auto;
        min-width: 0;
        min-height: 34px;
        height: auto;
        padding: 7px 8px;
        font-size: 12px;
        line-height: 1.55;
        white-space: normal;
      }
      .toggle {
        width: 100%;
        min-height: 40px;
        justify-content: start;
        padding: 6px 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--panel-soft);
      }
      .chart-canvas {
        height: min(72vh, 360px);
        min-height: 300px;
        border-radius: 10px;
      }
      .energy-card {
        padding: 10px;
        border-radius: 10px;
      }
      .energy-card .chart-canvas,
      .investment-composition-grid .chart-canvas {
        height: min(66vh, 330px);
        min-height: 280px;
      }
      .energy-card-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .energy-card-head > * { min-width: 0; }
      .energy-card-head h3 {
        font-size: 13px;
      }
      .energy-card-head p,
      .chart-note {
        font-size: 12px;
      }
      .investment-tabs {
        justify-content: stretch;
        margin-bottom: 10px;
      }
      .investment-table-card .scroll-table {
        max-height: 260px;
      }
      .product-controls,
      .product-chart-grid,
      .energy-layout,
      .investment-layout,
      .investment-trade-grid,
      .investment-composition-grid,
      .material-summary-grid {
        gap: 10px;
      }
      .product-picker-head {
        padding: 10px;
      }
      .product-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .mini-button {
        width: 100%;
        min-height: 38px;
        padding: 0 8px;
        font-size: 12px;
      }
      .mini-button.icon-only {
        width: 100%;
      }
      .selected-count {
        grid-column: 1 / -1;
        margin: 0;
        text-align: center;
      }
      .product-list {
        max-height: 260px;
        padding: 6px;
      }
      .product-option {
        padding: 8px;
        gap: 8px;
      }
      .data-table-wrap {
        max-height: 58vh;
        border-radius: 10px;
        -webkit-overflow-scrolling: touch;
      }
      .scroll-table {
        max-height: 58vh;
      }
      table {
        min-width: 680px;
        font-size: 12px;
      }
      th, td {
        padding: 9px 10px;
      }
      th:first-child,
      td:first-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background: var(--table-bg);
        box-shadow: -1px 0 0 var(--table-line);
        max-width: 148px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      th:first-child {
        z-index: 3;
        background: var(--table-head);
      }
      .table-more {
        margin-top: 8px;
      }
      .arrow-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
      }
      .theme-button {
        width: 36px;
        min-width: 36px;
        height: 36px;
      }
    }
    @media (max-width: 360px) {
      main {
        padding-inline:
          max(8px, env(safe-area-inset-right, 0))
          max(8px, env(safe-area-inset-left, 0));
      }
      .app-header { padding: 10px; }
      .app-title h1 { font-size: 16px; }
      .eyebrow { font-size: 10px; }
      .panel-tools { gap: 5px; }
      .theme-button,
      .logout-link {
        width: 34px;
        min-width: 34px;
        height: 34px;
      }
      .app-header .status {
        min-height: 34px;
        padding-inline: 7px;
        font-size: 11px;
      }
      .toolbar,
      .panel { padding: 10px; }
      .summary-card { flex-basis: min(100%, 280px); }
      .meta { grid-template-columns: 1fr; }
      .product-actions { grid-template-columns: 1fr; }
      .selected-count { grid-column: auto; }
      .chart-canvas {
        height: 310px;
        min-height: 270px;
      }
      .energy-card .chart-canvas,
      .investment-composition-grid .chart-canvas {
        height: 290px;
        min-height: 260px;
      }
    }
    @media (max-height: 500px) and (orientation: landscape) {
      .sticky-shell { position: relative; top: auto; }
      .chart-canvas,
      .energy-card .chart-canvas,
      .investment-composition-grid .chart-canvas {
        height: 300px;
        min-height: 260px;
      }
      .data-table-wrap,
      .scroll-table { max-height: 72vh; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    /* Dashboard layout refresh: geometry only; the existing color system is unchanged. */
    @media (min-width: 981px) {
      main {
        width: min(1480px, calc(100% - 40px));
        margin: 18px auto 48px;
      }
      .sticky-shell {
        top: auto;
        padding: 9px 12px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: color-mix(in srgb, var(--panel) 94%, transparent);
        box-shadow: var(--shadow);
      }
      body.dark .sticky-shell {
        background: color-mix(in srgb, var(--panel) 94%, transparent);
      }
      .app-header {
        grid-template-columns: minmax(170px, 1fr) minmax(280px, 520px) minmax(170px, 1fr);
        gap: 18px;
        padding: 2px 4px;
        border: 0;
        border-radius: 20px;
        background: transparent;
        box-shadow: none;
      }
      .brand-lockup {
        justify-self: start;
      }
      .app-header .panel-tools {
        justify-self: end;
        justify-content: flex-end;
        flex-wrap: nowrap;
      }
      .toolbar {
        display: block;
        width: 100%;
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .toolbar .input-shell {
        display: block;
      }
      .toolbar input {
        height: 42px;
        border-radius: 14px;
      }
      .toolbar #startBtn {
        position: absolute;
        z-index: 3;
        top: 4px;
        bottom: 4px;
        inset-inline-end: 4px;
        width: 34px;
        min-width: 34px;
        height: auto;
        padding: 0;
        border-radius: 11px;
        box-shadow: none;
      }
      .toolbar .search-field input {
        padding-inline-end: 50px;
      }
      .insight-nav {
        justify-content: center;
        width: fit-content;
        max-width: 100%;
        margin: 7px auto 0;
        padding: 4px;
        border-radius: 999px;
        box-shadow: none;
      }
      .insight-nav button {
        height: 32px;
        padding-inline: 14px;
        border-radius: 999px;
      }
      .summary-grid {
        gap: 14px;
        margin-top: 18px;
      }
      .summary-card {
        min-height: 142px;
        padding: 18px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .summary-card::before {
        inset: 18px auto 18px 0;
        width: 4px;
        border-radius: 999px;
      }
      .summary-card strong {
        margin-top: auto;
      }
      .summary-card em {
        margin-top: 8px;
      }
      .grid {
        grid-template-columns: minmax(310px, 0.7fr) minmax(0, 1.9fr);
        gap: 18px;
        margin-top: 18px;
      }
      .status-panel {
        position: static;
        align-self: stretch;
        display: flex;
        flex-direction: column;
      }
      .meta {
        flex: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(62px, 1fr);
      }
      .panel {
        padding: 22px;
        border-radius: 22px;
      }
      .panel + .panel,
      .product-panel,
      .compare-panel,
      .log-panel,
      .peer-distribution-card,
      .peer-quadrant-card,
      .investment-growth-card {
        margin-top: 18px;
      }
      .product-panel + #costsSection + .energy-panel {
        margin-top: 18px;
      }
      .panel-heading {
        margin-bottom: 18px;
      }
      .panel-heading h2 {
        font-size: 18px;
      }
      .chart-canvas {
        border-radius: 18px;
      }
      .energy-card,
      .product-picker,
      .investment-table-card {
        padding: 16px;
        border-radius: 18px;
      }
      .product-picker,
      .investment-table-card {
        padding: 0;
      }
      .segmented {
        border-radius: 14px;
      }
      .segment-button {
        border-radius: 10px;
      }
      .data-table-wrap {
        border-radius: 16px;
      }
      th, td {
        padding: 13px 14px;
      }
      .theme-button,
      .logout-link {
        width: 36px;
        height: 36px;
        border-radius: 999px;
      }
      .status {
        min-width: 86px;
        min-height: 36px;
        padding-inline: 10px;
        font-size: 11px;
      }
      .user-chip {
        min-height: 36px;
        padding-block: 3px;
      }
      .user-avatar {
        width: 28px;
        height: 28px;
      }
      .sticky-shell,
      .app-header,
      .app-title p,
      .toolbar,
      .insight-nav {
        transition: padding 0.2s ease, margin 0.2s ease, gap 0.2s ease, opacity 0.2s ease;
      }
    }
    /* Grid children use gap for spacing. Reset the generic stacked-panel margin
       so every card in the same row starts and ends on the same line. */
    .grid > .panel + .panel {
      margin-top: 0;
    }
    .grid > .panel,
    .energy-layout > .energy-card,
    .investment-trade-grid > .energy-card,
    .investment-composition-grid > *,
    .summary-grid > .summary-card,
    .material-summary-grid > .summary-card {
      height: 100%;
    }
    .energy-layout {
      align-items: stretch;
    }
    .app-header .toolbar {
      display: block;
      position: static;
      top: auto;
      z-index: auto;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .app-header .toolbar .input-shell {
      display: block;
    }
    .app-header .toolbar input {
      height: 42px;
      padding-inline-start: 13px;
      padding-inline-end: 50px;
      border-radius: 14px;
    }
    .app-header .toolbar #startBtn {
      position: absolute;
      z-index: 3;
      top: 4px;
      bottom: 4px;
      inset-inline-end: 4px;
      width: 34px;
      min-width: 34px;
      height: auto;
      min-height: 0;
      padding: 0;
      border-radius: 11px;
      box-shadow: none;
    }
    .insight-nav-shell {
      margin-top: 12px;
      padding: 7px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--panel);
      box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04);
    }
    .insight-nav-shell .insight-nav {
      justify-content: center;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 12px;
      background: transparent;
      box-shadow: none;
    }
    .insight-nav-shell .insight-nav button {
      height: 34px;
      border-radius: 10px;
    }
    @media (max-width: 980px) {
      main {
        width: min(100% - 24px, 820px);
        margin-top: 12px;
      }
      .sticky-shell {
        border-radius: 22px;
      }
      .brand-lockup {
        align-items: center;
      }
      .app-header {
        grid-template-columns: 150px minmax(220px, 1fr) auto;
        gap: 12px;
        padding: 8px;
      }
      .site-logo {
        width: 150px;
        height: auto;
      }
      .app-header .panel-tools {
        width: auto;
        flex-wrap: nowrap;
      }
      .app-header .status {
        flex: 0 0 36px;
        min-width: 36px;
        width: 36px;
        padding: 0;
        font-size: 0;
      }
      .app-header,
      .toolbar,
      .panel,
      .summary-card {
        border-radius: 18px;
      }
      .insight-nav,
      .insight-nav-shell,
      .data-table-wrap,
      .chart-canvas,
      .energy-card,
      .product-picker,
      .investment-table-card {
        border-radius: 16px;
      }
    }
    @media (max-width: 760px) {
      .app-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "brand tools"
          "search search";
        gap: 8px 12px;
      }
      .brand-lockup { grid-area: brand; }
      .app-header .toolbar { grid-area: search; }
      .app-header .panel-tools { grid-area: tools; }
    }
    @media (max-width: 560px) {
      main {
        width: 100%;
      }
      .sticky-shell {
        border-radius: 0 0 22px 22px;
      }
      .app-header {
        border-radius: 18px;
      }
      .site-logo {
        width: 112px;
      }
      .user-chip {
        min-width: 0;
        width: auto;
        max-width: 112px;
        padding: 3px 2px 3px 6px;
      }
      .user-name {
        display: block;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .toolbar {
        border-radius: 16px;
      }
      .insight-nav-shell {
        margin-inline: 0;
        padding: 6px;
        border-radius: 16px;
      }
      .insight-nav-shell .insight-nav {
        justify-content: flex-start;
      }
      .summary-card {
        flex-basis: min(78vw, 270px);
        min-height: 128px;
        border-radius: 18px;
      }
      .panel {
        border-radius: 18px;
      }
      .meta div,
      .toggle,
      .product-option {
        border-radius: 14px;
      }
    }
    @media (max-width: 420px) {
      .app-header .toolbar input {
        padding-inline-end: 56px;
      }
      .app-header .toolbar #startBtn {
        min-width: 42px;
        width: 42px;
        padding: 0;
      }
      .app-header .toolbar #startBtn span {
        display: none;
      }
    }
    @media (max-width: 360px) {
      .app-header {
        gap: 8px;
      }
      .site-logo {
        width: 96px;
      }
      .app-header .user-chip {
        max-width: 86px;
      }
      .app-header .user-name {
        max-width: 48px;
      }
      .header-icons {
        gap: 4px;
      }
    }
    
    /* Consolidated header/tablet/mobile behavior. Legacy fixed-header rules are
       removed from the served stylesheet; the sticky shell below is canonical. */
    :root { --header-height: 62px; --insight-nav-height: 50px; }
    html { scroll-padding-top: calc(var(--header-height) + var(--insight-nav-height) + 10px); }
    .mobile-search-toggle {
      display: none;
      place-items: center;
      inline-size: var(--control-height);
      min-inline-size: var(--control-height);
      block-size: var(--control-height);
      min-block-size: var(--control-height);
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--text);
      box-shadow: none;
    }
    .mobile-search-toggle svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
    .insight-nav-shell { position: relative; overflow: hidden; }
    .insight-nav-shell::before, .insight-nav-shell::after {
      content: ""; position: absolute; z-index: 3; inset-block: 0; inline-size: 28px; pointer-events: none;
    }
    .insight-nav-shell::before { inset-inline-start: 0; background: linear-gradient(90deg, transparent, var(--panel)); }
    .insight-nav-shell::after { inset-inline-end: 0; background: linear-gradient(270deg, transparent, var(--panel)); }
    .summary-pagination { display: none; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
    .summary-pagination span { inline-size: 6px; block-size: 6px; border-radius: 999px; background: var(--border-strong); }
    .summary-pagination span.active { inline-size: 18px; background: var(--primary); }
    @media (min-width: 721px) and (max-width: 980px) {
      .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .grid { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.38fr); align-items: stretch; }
      .energy-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .compare-panel .compact-summary { grid-template-columns: repeat(3, minmax(118px, 1fr)); }
      .chart-canvas { height: 420px; min-height: 400px; }
    }
    @media (max-width: 980px) {
      .app-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
      .brand-lockup { justify-self: start; min-width: 0; overflow: hidden; }
      .app-header .panel-tools { justify-self: end; min-width: 0; max-width: 100%; }
      .app-header .user-name, .header-divider, .app-header .user-chip { display: none; }
      .mobile-search-toggle { display: inline-grid; }
      .app-header .toolbar { display: none; }
      .header-shell.search-open .toolbar { display: block; }
      body.mobile-search-open::after {
        content: ""; position: fixed; z-index: calc(var(--z-header) - 1); inset: 0;
        background: rgba(15, 23, 42, .18); pointer-events: none;
      }
    }
    @media (max-width: 720px) {
      .grid, .energy-layout, .investment-composition-grid, .investment-trade-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .header-icons :is(.theme-button, .logout-link, .mobile-search-toggle) {
        inline-size: var(--control-height); min-inline-size: var(--control-height);
        block-size: var(--control-height); min-block-size: var(--control-height);
      }
      .site-logo { width: 104px; }
      .summary-pagination { display: flex; }
      .chart-canvas { height: 380px; min-height: 360px; }
      #monthlySalesChart, #peerGrowthScatterChart, .peer-distribution-card .chart-canvas { height: 420px; min-height: 400px; }
      .summary-card :is(span, em), .selected-count, .chart-note, .energy-card-head p { font-size: 12px; }
    }

    /* Modern KPI cards: compact, information-led, and scoped to the top row. */
    .summary-grid > .summary-card {
      isolation: isolate;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
      justify-content: stretch;
      align-content: stretch;
      min-height: 110px;
      padding: 13px 14px 12px;
      border-radius: 18px;
      background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel-soft) 72%, var(--panel)));
      box-shadow:
        0 10px 28px rgba(23, 32, 51, 0.065),
        inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
      transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s ease,
        border-color 0.22s ease;
    }
    .summary-grid > .summary-card::before {
      display: none;
    }
    .summary-grid > .summary-card::after {
      display: none;
    }
    .summary-grid > .summary-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
      box-shadow:
        0 16px 34px rgba(23, 32, 51, 0.11),
        inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
    }
    .summary-grid .kpi-card-top,
    .summary-grid .kpi-value-row {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      width: 100%;
      text-align: center;
    }
    .summary-grid .kpi-card-top {
      gap: 8px;
      width: auto;
      justify-self: stretch;
      min-height: 36px;
      margin: -13px -14px 0;
      padding: 0 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
      border-radius: 17px 17px 0 0;
      background: linear-gradient(
        115deg,
        color-mix(in srgb, var(--primary) 15%, var(--panel)) 0%,
        color-mix(in srgb, var(--primary) 7%, var(--panel-soft)) 55%,
        color-mix(in srgb, var(--panel-soft) 88%, var(--panel)) 100%
      );
    }
    .summary-grid .kpi-label {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.55;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .summary-grid .kpi-value-row {
      align-self: center;
      gap: 7px;
      margin-top: 2px;
    }
    .summary-grid > .summary-card strong {
      display: block;
      min-width: 0;
      margin: 0;
      font-size: clamp(18px, 1.45vw, 22px);
      line-height: 1.3;
    }
    .summary-grid .kpi-direction {
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      margin: 0;
      border-radius: 8px;
      color: currentColor;
    }
    .summary-grid .kpi-direction.positive {
      background: color-mix(in srgb, var(--success) 12%, transparent);
      color: var(--success);
    }
    .summary-grid .kpi-direction.negative {
      background: color-mix(in srgb, var(--danger) 11%, transparent);
      color: var(--danger);
    }
    .summary-grid .kpi-direction svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .summary-grid > .summary-card em {
      width: fit-content;
      max-width: 100%;
      margin: 3px auto 0;
      overflow: hidden;
      padding: 2px 7px;
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
      font-size: 10px;
      line-height: 1.55;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .summary-grid > .summary-card.kpi-alert {
      background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel-soft) 72%, var(--panel)));
    }
    .summary-grid > .summary-card.kpi-alert .kpi-card-top {
      border-bottom-color: color-mix(in srgb, var(--danger) 14%, var(--border));
      background: linear-gradient(
        115deg,
        color-mix(in srgb, var(--danger) 13%, var(--panel)) 0%,
        color-mix(in srgb, var(--danger) 6%, var(--panel-soft)) 55%,
        color-mix(in srgb, var(--panel-soft) 88%, var(--panel)) 100%
      );
    }
    body.dark .summary-grid > .summary-card {
      box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    @media (max-width: 980px) {
      .summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
      }
      .summary-grid > .summary-card {
        width: auto;
        min-width: 0;
        max-width: none;
        flex: initial;
        min-height: 106px;
      }
      .summary-grid > .summary-card.kpi-product-share {
        display: none !important;
      }
      .summary-pagination {
        display: none !important;
      }
    }
    @media (max-width: 560px) {
      .summary-grid {
        gap: 9px;
        padding-bottom: 5px;
      }
      .summary-grid > .summary-card {
        width: auto;
        flex: initial;
        min-height: 100px;
        padding: 11px 12px 10px;
        border-radius: 16px;
      }
      .summary-grid .kpi-card-top {
        min-height: 33px;
        margin: -11px -12px 0;
        border-radius: 15px 15px 0 0;
      }
      .summary-grid > .summary-card strong {
        font-size: 18px;
      }
      .summary-grid > .summary-card em {
        margin-top: 2px;
      }
      .summary-pagination {
        gap: 5px;
        margin-top: 1px;
      }
      .summary-pagination span {
        width: 5px;
        height: 5px;
      }
      .summary-pagination span.active {
        width: 14px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .summary-grid > .summary-card {
        transition-duration: 0.01ms !important;
      }
    }
    @media (max-width: 360px) {
      .site-logo {
        width: 92px;
      }
      .app-header .user-chip {
        max-width: 82px;
      }
      .app-header .user-name {
        max-width: 46px;
      }
      .header-divider {
        display: none;
      }
    }
    /* Compact market snapshot is mobile-only; tablets use the desktop card. */
    @media (max-width: 720px) {
      #overviewSection {
        align-items: start;
      }
      #overviewSection > .status-panel {
        align-self: start;
        height: auto;
        min-height: 0;
        padding: 8px;
      }
      .symbol-status-content {
        gap: 5px;
      }
      .symbol-identity {
        min-height: 52px;
        padding: 8px 10px;
        border-radius: 12px;
      }
      .symbol-identity-copy {
        display: grid;
        width: 100%;
        min-width: 0;
        gap: 1px;
      }
      .symbol-identity-copy strong {
        min-width: 0;
        font-size: 18px;
        line-height: 1.25;
      }
      .symbol-identity-copy p {
        overflow: hidden;
        margin: 0;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.45;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .symbol-industry-badge {
        min-height: 20px;
        overflow: hidden;
        padding: 1px 7px;
        font-size: 8px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .symbol-price-grid {
        gap: 0;
        border-radius: 11px;
      }
      .symbol-market-overview {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
        border-radius: 11px;
        background: linear-gradient(
          145deg,
          color-mix(in srgb, var(--primary) 5%, var(--panel)),
          var(--panel-soft)
        );
      }
      .symbol-market-overview.has-market-cap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .symbol-market-overview .symbol-price-grid,
      .symbol-market-overview .symbol-market-cap-grid {
        display: contents;
      }
      .symbol-price-card {
        display: flex;
        min-height: 50px;
        flex-direction: column;
        justify-content: center;
        padding: 5px 2px;
        border-radius: 0;
      }
      .symbol-price-card > span {
        width: 100%;
        font-size: 8px;
        line-height: 1.3;
        text-align: center;
      }
      .mobile-price-unit {
        display: none;
      }
      .symbol-price-value-row {
        justify-content: center;
        gap: 1px;
        margin-top: 1px;
        flex-wrap: nowrap;
      }
      .symbol-price-card strong {
        flex: 0 1 auto;
        overflow: visible;
        font-size: clamp(9px, 2.75vw, 11px);
        line-height: 1.3;
      }
      .symbol-price-change {
        min-height: 15px;
        padding: 1px 2px;
        font-size: 7px;
        line-height: 1.25;
      }
      .symbol-price-card small {
        display: none;
      }
      .symbol-market-cap-grid {
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      .symbol-market-cap-card {
        display: flex;
        min-height: 50px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px 2px;
        border-inline-start: 1px solid var(--border);
      }
      .symbol-market-cap-card span,
      .symbol-market-cap-rate {
        font-size: 8px;
      }
      .symbol-market-cap-card strong {
        margin-top: 2px;
        font-size: clamp(8px, 2.55vw, 10px);
      }
      .symbol-market-cap-rate {
        display: none;
      }
      .symbol-fundamental-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        border-radius: 11px;
      }
      .symbol-fundamental-card {
        min-height: 50px;
        padding: 4px 2px;
        border-radius: 0;
        border-top: 0;
        border-inline-start: 0;
      }
      .symbol-fundamental-card + .symbol-fundamental-card {
        border-inline-start: 1px solid var(--border);
      }
      .symbol-fundamental-card:nth-child(n + 3) {
        border-top: 0;
      }
      .symbol-fundamental-card span {
        font-size: 8px;
        line-height: 1.25;
      }
      .symbol-fundamental-card strong {
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.25;
      }
      .pe-comparison-badge {
        min-height: 14px;
        margin-top: 1px;
        padding: 0 3px;
        font-size: 7px;
        line-height: 1.2;
      }
      .symbol-source-actions {
        position: static;
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin: 0;
        padding-top: 5px;
      }
      .symbol-source-link {
        width: auto;
        min-width: 0;
        height: 30px;
        min-height: 30px;
        padding: 2px 6px;
        border-radius: 8px;
        font-size: 12px;
      }
      .symbol-source-label {
        display: inline;
      }
      .fund-holdings-panel {
        padding: 10px;
      }
      .fund-allocation-panel {
        padding: 10px;
      }
      .fund-valuation-panel {
        padding: 10px;
      }
      .fund-valuation-panel .panel-heading {
        margin-bottom: 8px;
      }
      .fund-valuation-panel .panel-heading h2 {
        font-size: 14px;
      }
      .fund-valuation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 11px;
      }
      .fund-valuation-card {
        min-height: 88px;
        padding: 9px 5px 7px;
      }
      .fund-valuation-card:nth-child(odd) {
        border-inline-start: 0;
      }
      .fund-valuation-card:nth-child(even) {
        border-inline-start: 1px solid var(--border);
      }
      .fund-valuation-card:nth-child(n + 3) {
        border-top: 1px solid var(--border);
      }
      .fund-valuation-card span {
        min-height: 0;
        font-size: 9px;
      }
      .fund-valuation-card strong {
        margin-top: 1px;
        font-size: 16px;
      }
      .fund-valuation-card small {
        font-size: 7px;
      }
      .fund-flow-panel {
        padding: 10px;
      }
      .fund-changes-panel { padding: 10px; }
      .fund-change-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fund-change-grid,
      .fund-change-columns,
      .fund-change-allocation { grid-template-columns: minmax(0, 1fr); }
      .fund-flow-panel > .panel-heading > .segmented {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
      }
      .fund-flow-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
      .fund-flow-card {
        min-height: 340px;
      }
      .fund-allocation-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
      .fund-allocation-card {
        min-height: 330px;
      }
      .fund-industry-members {
        margin-top: 8px;
        padding: 9px;
      }
      .fund-industry-members-list {
        grid-template-columns: minmax(0, 1fr);
      }
      .fund-industry-member {
        gap: 6px;
        padding: 8px;
      }
      .fund-allocation-chart {
        min-height: 290px;
      }
      .fund-holdings-panel .panel-heading {
        margin-bottom: 8px;
      }
      .fund-holdings-panel .panel-heading h2 {
        font-size: 14px;
      }
      .fund-holdings-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 7px;
        direction: rtl;
      }
      .fund-holding-search {
        width: 100%;
        min-width: 0;
        order: -1;
      }
      .fund-holding-search input {
        min-height: 35px;
        font-size: 11px;
      }
      .fund-holding-tabs {
        width: 100%;
        flex: none;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
      }
      .fund-holding-mobile-sort { display: none; }
      .fund-holdings-shell {
        max-height: 430px;
        overflow: auto;
        overscroll-behavior: contain;
      }
      .fund-holdings-head,
      .fund-holding-row {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(82px, 1.2fr) minmax(48px, .62fr) minmax(62px, .78fr) minmax(72px, .9fr);
        gap: 0;
      }
      .fund-holdings-head {
        display: grid;
        min-height: 42px;
        padding: 0;
      }
      .fund-holdings-head > span,
      .fund-holdings-head > .fund-sort-button {
        height: 100%;
        padding: 7px 5px;
        border-inline-start: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        font-size: 12px;
        line-height: 1.45;
        white-space: normal;
      }
      .fund-holdings-head .fund-holding-detail { display: none; }
      .fund-holdings-list {
        max-height: none;
        overflow: visible;
      }
      .fund-holding-row {
        min-height: 54px;
        padding: 0;
      }
      .fund-holding-name {
        height: 100%;
        align-content: center;
        padding: 6px 5px;
        border-inline-start: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
      }
      .fund-holding-name strong {
        max-width: 100%;
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.45;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .fund-holding-cell {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 6px 4px;
        border-inline-start: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
        font-size: 12px;
        white-space: normal;
      }
      .fund-holding-row > .fund-holding-detail { display: none; }
      .fund-holding-row.is-expanded > .fund-holding-mobile-details {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border-top: 1px dashed var(--border);
        background: var(--panel-soft);
      }
      .fund-holding-mobile-details div {
        display: grid;
        gap: 2px;
        padding: 5px;
        border-radius: 7px;
        background: var(--panel);
      }
      .fund-holding-mobile-details span { color: var(--muted); font-size: 8px; }
      .fund-holding-mobile-details strong { color: var(--text); font-size: 10px; }
    }
    @media (max-width: 360px) {
      .symbol-fundamental-card span {
        font-size: 7px;
      }
      .symbol-fundamental-card strong {
        font-size: 12px;
      }
    }
    /* Mini KPI tiles for tablet and mobile: same content, substantially less height. */
    @media (max-width: 980px) {
      .summary-grid {
        gap: 7px;
        margin-top: 10px;
        padding-bottom: 0;
      }
      .summary-grid > .summary-card {
        min-height: 80px;
        padding: 8px 9px 7px;
        border-radius: 13px;
        box-shadow: 0 6px 16px rgba(23, 32, 51, 0.055);
      }
      .summary-grid > .summary-card:hover {
        transform: none;
      }
      .summary-grid .kpi-card-top {
        min-height: 24px;
        margin: -8px -9px 0;
        padding-inline: 7px;
        border-radius: 12px 12px 0 0;
      }
      .summary-grid .kpi-label {
        font-size: 9px;
        line-height: 1.3;
      }
      .summary-grid .kpi-value-row {
        gap: 4px;
        margin-top: 1px;
      }
      .summary-grid > .summary-card strong {
        font-size: 17px;
        line-height: 1.2;
      }
      .summary-grid .kpi-direction {
        width: 18px;
        height: 18px;
        border-radius: 6px;
      }
      .summary-grid .kpi-direction svg {
        width: 11px;
        height: 11px;
      }
      .summary-grid > .summary-card em {
        margin-top: 1px;
        padding: 0 4px;
        font-size: 8px;
        line-height: 1.35;
      }
    }
    @media (max-width: 560px) {
      .summary-grid {
        gap: 6px;
        margin-top: 8px;
      }
      .summary-grid > .summary-card {
        min-height: 72px;
        padding: 7px 8px 6px;
        border-radius: 12px;
      }
      .summary-grid .kpi-card-top {
        min-height: 22px;
        margin: -7px -8px 0;
        border-radius: 11px 11px 0 0;
      }
      .summary-grid .kpi-label {
        font-size: 8px;
      }
      .summary-grid > .summary-card strong {
        font-size: 16px;
      }
      .summary-grid .kpi-direction {
        width: 16px;
        height: 16px;
      }
      .summary-grid > .summary-card em {
        max-width: 100%;
        font-size: 7px;
      }
    }
    /* Responsive guardrails constrain the actual overflowing components;
       the document itself remains unclipped so focus rings and chart labels survive. */
    html,
    body {
      max-width: 100%;
    }
    body > main,
    main > *,
    .grid,
    .panel,
    .panel > *,
    .panel-heading,
    .panel-heading > *,
    .energy-layout,
    .energy-card,
    .energy-card > *,
    .product-controls,
    .product-chart-grid,
    .investment-layout,
    .investment-composition-grid,
    .investment-trade-grid,
    .comparison-layout,
    .compare-panel > *,
    .fund-allocation-grid,
    .fund-flow-grid,
    .fund-valuation-grid {
      min-width: 0;
      max-width: 100%;
    }
    .chart-canvas,
    .chart-canvas > div,
    .chart-canvas canvas {
      max-width: 100% !important;
    }
    .data-table-wrap,
    .scroll-table,
    .fund-holdings-shell,
    .fund-holding-tabs,
    .insight-nav {
      max-width: 100%;
      overscroll-behavior-inline: contain;
    }
    .data-table-wrap,
    .scroll-table,
    .fund-holdings-shell {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    @media (max-width: 980px) {
      body > main {
        max-width: 100%;
      }
      .header-shell,
      .insight-nav-shell { max-width: none; }
      .panel-heading {
        align-items: start;
      }
      .panel-heading > :first-child {
        flex: 1 1 240px;
        min-width: 0;
        max-width: 100%;
      }
      .panel-heading h2,
      .energy-card-head h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
      }
      .panel-heading p,
      .energy-card-head p {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
      .panel-heading > .panel-tools,
      .chart-actions,
      .compare-actions {
        min-width: 0;
        max-width: 100%;
      }
      .segmented {
        max-width: 100%;
      }
    }
    @media (max-width: 820px) {
      .grid,
      .energy-layout,
      .investment-layout,
      .investment-composition-grid,
      .investment-trade-grid,
      .product-chart-grid,
      .fund-allocation-grid,
      .fund-flow-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .fund-valuation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .fund-valuation-card:nth-child(odd) {
        border-inline-start: 0;
      }
      .fund-valuation-card:nth-child(even) {
        border-inline-start: 1px solid var(--border);
      }
      .fund-valuation-card:nth-child(n + 3) {
        border-top: 1px solid var(--border);
      }
    }
    @media (max-width: 560px) {
      body > main {
        width: 100%;
        max-width: 100%;
      }
      .header-shell,
      .insight-nav-shell { max-width: none; }
      .panel-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        gap: 6px 8px;
      }
      .panel-heading > :first-child {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }
      .panel-heading > .accordion-toggle {
        grid-column: 2;
        grid-row: 1;
      }
      .panel-heading > .panel-tools {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin-top: 2px;
      }
      .panel-heading h2 {
        font-size: clamp(13px, 3.8vw, 15px);
        line-height: 1.55;
      }
      .panel-heading p {
        margin-top: 2px;
        font-size: clamp(10px, 3vw, 11.5px);
        line-height: 1.7;
      }
      .energy-card-head {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
      }
      .energy-card-head h3 {
        font-size: clamp(12px, 3.6vw, 14px);
        line-height: 1.55;
      }
      .energy-card-head p,
      .chart-note {
        font-size: clamp(10px, 3vw, 11.5px);
        line-height: 1.7;
      }
      .chart-actions,
      .compare-actions,
      .chart-actions .segmented,
      .compare-actions .segmented {
        width: 100%;
      }
      .segment-button {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .summary-grid > .summary-card {
        max-width: 100%;
      }
      #peerGrowthScatterChart {
        height: min(112vw, 440px);
        min-height: 350px;
      }
    }
    @media (max-width: 360px) {
      .panel,
      .energy-card {
        padding-inline: 9px;
      }
      .panel-heading h2 {
        font-size: 13px;
      }
      .panel-heading p,
      .energy-card-head p,
      .chart-note {
        font-size: 10px;
      }
      #peerGrowthScatterChart {
        min-height: 330px;
      }
    }

    /* Definitive responsive shell: keep navigation in normal document flow.
       This prevents mobile browsers from placing fixed UI in a different
       horizontal viewport when a chart is resized or the device rotates. */
    .header-shell {
      position: sticky !important;
      top: 0 !important;
      inset-inline: auto !important;
      width: min(1480px, calc(100% - 40px)) !important;
      max-width: 1480px !important;
      margin: 0 auto !important;
      transform: none !important;
      backdrop-filter: none !important;
    }
    .header-shell.is-scrolled {
      top: 0 !important;
      inset-inline: auto !important;
      width: min(1480px, calc(100% - 40px)) !important;
      max-width: 1480px !important;
      margin-inline: auto !important;
    }
    .header-spacer,
    .insight-nav-spacer {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    .insight-nav-shell,
    .header-shell.is-scrolled ~ .insight-nav-shell {
      position: sticky !important;
      top: var(--header-height) !important;
      inset-inline: auto !important;
      width: min(1480px, calc(100% - 40px)) !important;
      max-width: 1480px !important;
      margin: 0 auto !important;
      transform: none !important;
    }
    @media (max-width: 980px) {
      .header-shell,
      .header-shell.is-scrolled,
      .insight-nav-shell,
      .header-shell.is-scrolled ~ .insight-nav-shell {
        width: calc(100% - 24px) !important;
        max-width: none !important;
      }
      .app-header .toolbar {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        inset-inline: 0 !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
      }
    }
    @media (max-width: 560px) {
      .header-shell,
      .header-shell.is-scrolled,
      .insight-nav-shell,
      .header-shell.is-scrolled ~ .insight-nav-shell {
        width: calc(100% - 16px) !important;
      }
    }

    /* ECharts writes pixel widths into its internal ZRender nodes. Inline-size
       containment prevents a stale desktop width from widening the document. */
    .chart-canvas {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      contain: layout inline-size;
    }
    .comparison-layout,
    .comparison-layout > .energy-card,
    #peerTrendChart,
    #peerGrowthScatterChart {
      inline-size: 100%;
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    .chart-canvas > div:not(.echarts-tooltip) {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    .chart-canvas canvas {
      max-inline-size: 100% !important;
    }
    .echarts-tooltip {
      max-width: min(320px, calc(100% - 16px)) !important;
      overflow-wrap: anywhere;
    }
    .data-table-wrap,
    .scroll-table,
    .fund-holdings-shell {
      min-width: 0;
      max-width: 100%;
      contain: inline-size;
    }
    .fund-holding-tabs,
    .insight-nav,
    .summary-grid,
    .data-table-wrap,
    .scroll-table,
    .fund-holdings-shell {
      overscroll-behavior-inline: contain;
    }
    /* Authoritative responsive layer. Keep document flow intrinsic and confine
       horizontal scrolling to explicitly scrollable components. */
    :where(main, .header-shell, .insight-nav-shell, section, .panel, .grid, .toolbar,
      .app-header, .panel-heading, .panel-tools, .energy-layout, .product-chart-grid,
      .investment-layout, .investment-composition-grid, .investment-trade-grid) {
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    :where(.data-table-wrap, .scroll-table, .fund-holdings-shell) {
      position: relative;
      inline-size: 100%;
      max-inline-size: 100%;
      overflow-x: auto;
      overflow-y: auto;
      scrollbar-gutter: stable;
      -webkit-overflow-scrolling: touch;
      background-image: linear-gradient(to left, rgba(100, 113, 128, .18), transparent 16px),
                        linear-gradient(to right, rgba(100, 113, 128, .18), transparent 16px);
      background-repeat: no-repeat;
      background-position: left center, right center;
      background-size: 16px 100%;
    }
    .header-shell { z-index: var(--z-popover) !important; }
    .insight-nav-shell { z-index: var(--z-header) !important; }
    /* Header and navigator are one visual surface: rounded on the outside,
       square where the two sections meet. */
    .header-shell,
    .header-shell.is-scrolled,
    .app-header {
      border-radius: 18px 18px 0 0 !important;
    }
    .header-shell,
    .header-shell.is-scrolled {
      border: 1px solid var(--border) !important;
      border-bottom: 0 !important;
    }
    .app-header {
      border: 0 !important;
      border-bottom: 1px solid var(--border) !important;
    }
    .insight-nav-shell,
    .header-shell.is-scrolled ~ .insight-nav-shell {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-left-radius: 18px !important;
      border-bottom-right-radius: 18px !important;
      border-top: 0;
    }
    @media (min-width: 981px) {
      .header-shell,
      .header-shell.is-scrolled {
        background: var(--panel) !important;
      }
    }
    :where(table, .fund-holdings-head, .fund-holding-row) {
      max-inline-size: none;
    }
    .request-error {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      margin: var(--space-3) 0;
      padding: var(--space-3) var(--space-4);
      border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
      border-radius: var(--radius-md);
      background: color-mix(in srgb, var(--danger) 8%, var(--panel));
      color: var(--danger);
    }
    .request-error[hidden] { display: none; }
    .request-error div { display: grid; gap: var(--space-1); min-width: 0; }
    .request-error span { color: var(--text); font-size: 13px; }
    .request-error button { flex: 0 0 auto; min-height: var(--control-height); }
    .fund-list-more {
      display: flex;
      justify-content: center;
      padding: var(--space-3);
    }
    .stock-owner-list-more td {
      padding: var(--space-3);
      text-align: center;
    }
    @supports not (color: color-mix(in srgb, white, black)) {
      .app-header, .sticky-shell { background: var(--panel); }
      .request-error { border-color: var(--danger); background: var(--panel); }
      .metric-positive, .fund-valuation-card.is-positive strong { color: #087650; }
    }
    @media (max-width: 980px) {
      main {
        width: min(100% - 24px, 820px);
        margin-inline: auto;
      }
      .app-header {
        width: 100%;
        margin-inline: 0;
      }
      .chart-canvas { max-width: 100%; }
    }
    @media (max-width: 720px) {
      main {
        width: 100%;
        padding-inline: max(10px, env(safe-area-inset-right, 0)) max(10px, env(safe-area-inset-left, 0));
      }
      .request-error { align-items: stretch; flex-direction: column; }
      .request-error button { width: 100%; }
      :where(.data-table-wrap, .scroll-table) table { min-width: 640px; }
      :where(.data-table-wrap, .scroll-table) th,
      :where(.data-table-wrap, .scroll-table) td { white-space: nowrap; }
    }
    @media (max-width: 360px) {
      main {
        padding-inline: max(8px, env(safe-area-inset-right, 0)) max(8px, env(safe-area-inset-left, 0));
      }
    }
    @supports not (backdrop-filter: blur(1px)) {
      .sticky-shell,
      .header-shell { backdrop-filter: none; }
    }