/* Port 3016 / 51a99846: original watchlist styles, scoped to this preview. */
@scope (.sidebar-preview) {
/* ── Watchlist Resize Handle ── */
    #wl-resize-handle {
      width: 5px;
      flex-shrink: 0;
      cursor: ew-resize;
      background: var(--tos-bg-chart);
      transition: background 0.15s;
      z-index: 101;
      display: none;
    }
    #wl-resize-handle:hover,
    #wl-resize-handle.active {
      background: var(--tos-bg-chart);
    }

    /* ── Watchlist Sidebar ── */
    .wl-sidebar {
      width: 320px;
      flex-shrink: 0;
      background: var(--tos-bg-deep);
      border-left: 1px solid var(--tos-bg-chart);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 100;
      transition: width 200ms ease, opacity 200ms ease;
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .wl-sidebar.resizing {
      transition: none;
    }
    .wl-sidebar.collapsed {
      width: 0 !important;
      opacity: 0;
      border-left: none;
      pointer-events: none;
      min-width: 0;
    }
    .wl-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-bottom: 1px solid var(--tos-border-sep);
      flex-shrink: 0;
    }
    .wl-title-btn {
      white-space: nowrap;
      flex-shrink: 0;
      background: none;
      border: none;
      color: var(--tos-text-bright);
      font-family: inherit;
      font-size: 14px;
      font-weight: 200;
      cursor: default;
      padding: 2px 6px;
      border-radius: var(--tos-radius-sm);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .wl-title-btn:hover { background: var(--tos-bg-hover); }
    .wl-title-arrow { font-size: 10px; color: var(--tos-text-muted); }
    .wl-header-actions { display: flex; gap: 4px; }
    .wl-icon-btn {
      background: none;
      border: 1px solid var(--tos-border-sep);
      color: var(--tos-text-muted);
      width: 28px;
      height: 28px;
      border-radius: var(--tos-radius-sm);
      font-size: 16px;
      font-family: inherit;
      cursor: default;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .wl-icon-btn:hover { color: var(--tos-text-bright); border-color: var(--tos-border-strong); }

    .wl-search {
      padding: 0;
      flex-shrink: 0;
    }
    .wl-search input {
      width: 100%;
      padding: 8px 12px;
      background: var(--tos-bg-dark);
      border: none;
      border-bottom: 1px solid var(--tos-border-sep);
      color: var(--tos-text-bright);
      font-family: inherit;
      font-size: 12px;
      outline: none;
    }
    .wl-search input::placeholder { color: var(--tos-text-dim); }
    .wl-search-results {
      max-height: 200px;
      overflow-y: auto;
      background: var(--tos-bg-dark);
    }
    .wl-search-row {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      cursor: default;
      gap: 10px;
    }
    .wl-search-row:hover { background: var(--tos-bg-hover); }
    .wl-search-sym {
      font-size: 12px;
      font-weight: 500;
      color: var(--tos-text-bright);
      min-width: 60px;
    }
    .wl-search-name {
      font-size: 11px;
      color: var(--tos-text-muted);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Column header row */
    .wl-col-header {
      display: flex;
      align-items: center;
      padding: 4px 16px 4px 13px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
      gap: 0;
    }
    .wl-col-header span {
      font-size: 13px;
      font-weight: 100;
      text-transform: uppercase;
      color: var(--tos-text-dim);
      cursor: default;
      padding: 3px 0;
      letter-spacing: 0.3px;
      transition: color 0.15s;
    }
    .wl-col-header span:hover { color: var(--tos-text-muted); }
    .wl-col-header span.active { color: var(--tos-accent); }
    .wl-hdr-sym { flex: 3; min-width: 104px; padding-left: 0; }
    .wl-hdr-last { flex: 2; min-width: 56px; text-align: right; }
    .wl-hdr-chg { flex: 2; min-width: 56px; text-align: right; }
    .wl-hdr-chgpct { flex: 2; min-width: 64px; text-align: right; }

    .wl-list {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .wl-list::-webkit-scrollbar { width: 6px; }
    .wl-list::-webkit-scrollbar-track { background: transparent; }
    .wl-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: var(--tos-radius-sm); }
    .wl-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

    /* Watchlist row — tabular layout with blue left border accent */
    .wl-row {
      display: flex;
      align-items: center;
      padding: 5px 16px 5px 10px;
      cursor: default;
      gap: 0;
      border-left: 3px solid transparent;
      border-bottom: 1px solid var(--tos-border-sep);
      transition: background 0.08s, border-left-color 0.08s;
      user-select: none;
    }
    .wl-row:hover { background: rgba(236,242,248,0.10); }
    .wl-row.active { border: 1px solid rgba(255,255,255,0.5); border-left-width: 3px; background: rgba(236,242,248,0.10); padding: 4px 15px 4px 8px; }
    .wl-row.dragging { opacity: 0.4; }
    .wl-row.drag-over { border-top: 2px solid var(--tos-accent); margin-top: -2px; }

    /* Logo circle */
    .wl-logo {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--tos-bg-surface);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .wl-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .wl-logo-fallback {
      font-size: 10px;
      font-weight: 300;
      color: #888;
      line-height: 1;
    }

    /* Ticker cell: logo + symbol text */
    .wl-ticker-cell {
      flex: 3;
      display: flex;
      align-items: center;
      min-width: 104px;
    }
    .wl-sym-text {
      font-size: 16px;
      font-weight: 100;
      color: var(--tos-text-bright);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Data cells — proportional width, right-aligned, tabular numbers */
    .wl-cell-last, .wl-cell-chg, .wl-cell-chgpct {
      font-size: 15px;
      font-weight: 100;
      font-variant-numeric: tabular-nums;
      text-align: right;
      min-width: 56px;
    }
    .wl-cell-last { flex: 2; color: var(--tos-text-bright); }
    .wl-cell-chg { flex: 2; }
    .wl-cell-chgpct { flex: 2; min-width: 64px; }
    .wl-cell-chg.up, .wl-cell-chgpct.up { color: var(--tos-up); }
    .wl-cell-chg.down, .wl-cell-chgpct.down { color: var(--tos-down); }

    /* Collapsible section header */
    .wl-section-header {
      display: flex;
      align-items: center;
      padding: 6px 10px 4px 13px;
      user-select: none;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      gap: 6px;
    }
    .wl-section-header:hover { background: var(--tos-bg-subtle); }
    .wl-section-chevron {
      font-size: 10px;
      color: var(--tos-text-dim);
      transition: transform 0.15s ease;
      display: inline-block;
      cursor: default;
    }
    .wl-section-header.collapsed .wl-section-chevron {
      transform: rotate(-90deg);
    }
    .wl-section-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--tos-text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: text;
    }
    .wl-section-rename-input {
      font-size: 12px;
      font-weight: 500;
      color: var(--tos-text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--tos-bg-input);
      border: 1px solid var(--tos-accent);
      border-radius: var(--tos-radius-sm);
      padding: 1px 4px;
      outline: none;
      width: 120px;
    }
    .wl-section-group.collapsed {
      display: none;
    }

    .wl-empty {
      padding: 24px 16px;
      text-align: center;
      font-size: 12px;
      color: var(--tos-text-dim);
    }

    /* Watchlist context menu */
    .wl-ctx-menu {
      position: fixed;
      background: var(--tos-bg-dark);
      border: 1px solid var(--tos-border-light);
      border-radius: var(--tos-radius-md);
      padding: 4px 0;
      z-index: 5000;
      box-shadow: var(--tos-shadow-sm);
      min-width: 160px;
      display: none;
    }
    .wl-ctx-menu.visible { display: block; }
    .wl-ctx-item {
      display: block;
      width: 100%;
      padding: 8px 16px;
      background: none;
      border: none;
      color: var(--tos-text-secondary);
      font-family: inherit;
      font-size: 12px;
      text-align: left;
      cursor: default;
    }
    .wl-ctx-item:hover { background: var(--tos-bg-active); color: var(--tos-text-bright); }

    /* Watchlist selector dropdown: shared UI typography and neutral surfaces. */
    .wl-selector-dropdown {
      position: fixed;
      background: var(--tos-bg-popup);
      color: var(--tos-text-primary);
      border: 1px solid var(--tos-border-sep);
      border-radius: 6px;
      z-index: 5000;
      box-shadow: var(--tos-shadow-sm);
      min-width: 0;
      box-sizing: border-box;
      max-width: calc(100vw - 16px);
      max-height: 320px;
      overflow-y: auto;
      padding: 4px;
      font: 400 12px/18px var(--tos-font-ui);
      user-select: none;
    }
    .wl-selector-item {
      display: flex;
      align-items: center;
      min-height: 30px;
      padding: 0;
      border-radius: 6px;
      cursor: default;
      gap: 0;
    }
    .wl-selector-select { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; min-height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; }
    .wl-selector-check { display: flex; align-items: center; width: 16px; flex: 0 0 16px; color: var(--tos-text-primary); }
    .wl-selector-item:hover { background: var(--tos-bg-hover); }
    .wl-selector-item.active { background: var(--tos-bg-subtle); }
    .wl-selector-item.active:hover { background: var(--tos-bg-hover); }
    .wl-selector-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--tos-text-primary);
    }
    .wl-selector-count {
      flex-shrink: 0;
      font-size: 12px;
      color: var(--tos-text-muted);
    }
    .wl-selector-rename { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:28px; height:28px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--tos-text-muted); cursor:default; }
    .wl-selector-rename:hover { color:var(--tos-text-primary); background:var(--tos-bg-hover); }
    .wl-selector-delete {
      background: none;
      border: none;
      border-radius: 4px;
      color: var(--tos-text-muted);
      font-size: 16px;
      cursor: default;
      padding: 2px 4px;
      line-height: 1;
    }
    .wl-selector-delete:hover { color: var(--tos-down); background: var(--tos-bg-hover); }
    .wl-selector-new {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 30px;
      gap: 6px;
      padding: 4px 6px;
      border-radius: 6px;
      cursor: default;
      color: var(--tos-text-primary);
      font: inherit;
      background: transparent;
      border: 0;
      border-top: 1px solid var(--tos-border-sep);
      margin-top: 4px;
    }
    .wl-selector-new:hover { background: var(--tos-bg-hover); }
    .wl-selector-dropdown button:focus-visible { outline: 2px solid var(--tos-border-strong); outline-offset: -2px; }
    .wl-name-dialog {
      position: fixed; inset: 0; margin: auto; height: fit-content;
      max-height: calc(100dvh - 32px); overflow-y: auto;
      width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 0;
      border: 1px solid var(--tos-window-border); border-radius: 10px;
      background: var(--tos-window-bg); color: var(--tos-window-text);
      box-shadow: var(--tos-window-shadow); font: 400 13px/18px 'Inter', var(--tos-font-ui);
    }
    .wl-name-dialog::backdrop { background: rgba(0, 0, 0, 0.28); }
    .wl-name-form { display: flex; flex-direction: column; margin: 0; }
    .wl-name-heading {
      display: flex; justify-content: space-between; align-items: center;
      min-height: 54px; padding: 0 14px 0 20px;
      border-bottom: 1px solid var(--tos-window-border); background: var(--tos-window-header-bg);
    }
    .wl-name-heading h2 { margin: 0; color: var(--tos-window-title); font: 400 17px/1.2 'Inter', var(--tos-font-ui); letter-spacing: -0.01em; }
    .wl-name-close {
      display: inline-flex; justify-content: center; align-items: center;
      width: var(--tos-window-close-size); height: var(--tos-window-close-size); padding: 0;
      border: 0; border-radius: var(--tos-window-button-radius); background: transparent;
      color: var(--tos-window-muted); cursor: default;
    }
    .wl-name-close svg { width: var(--tos-window-close-icon-size); height: var(--tos-window-close-icon-size); }
    .wl-name-close:hover { background: var(--tos-window-hover-bg); color: var(--tos-window-title); }
    .wl-name-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--tos-window-content-bg); }
    .wl-name-form label { color: var(--tos-window-muted); font-weight: 400; }
    .wl-name-form input {
      box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px;
      border: 1px solid var(--tos-window-border-strong); border-radius: 4px;
      background: var(--tos-window-bg-alt); color: var(--tos-window-title); font: inherit;
    }
    .wl-name-form input::placeholder { color: var(--tos-window-muted); }
    .wl-name-form input:focus { outline: none; border-color: var(--tos-window-border-strong); box-shadow: none; }
    .wl-name-form input::selection { background: var(--tos-window-active-bg); color: var(--tos-window-title); }
    #wl-name-error { margin: 0; color: var(--tos-down); font-size: 12px; }
    .wl-name-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--tos-window-border); }
    .wl-name-actions button {
      min-width: 84px; height: 34px; padding: 0 14px;
      border: 1px solid var(--tos-window-border-strong); border-radius: 2px;
      background: transparent; color: var(--tos-window-text); font: 500 13px/18px 'Inter', var(--tos-font-ui); cursor: default;
    }
    .wl-name-actions .wl-name-create { background: var(--tos-window-active-bg); border-color: var(--tos-accent-border); color: var(--tos-window-title); }
    .wl-name-actions button:hover { background: var(--tos-window-hover-bg); border-color: var(--tos-window-muted); }
    .wl-name-actions button:disabled { opacity: 0.55; cursor: wait; }
    .wl-name-dialog button:focus-visible { outline: 2px solid var(--tos-accent); outline-offset: 2px; }


    #wl-toggle-btn.active {
      color: var(--tos-accent);
      border-color: var(--tos-accent);
      background: var(--tos-accent-bg);
    }


}
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) { overflow-x: hidden; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-sidebar { display: flex !important; width: 100% !important; min-width: 0; opacity: 1; pointer-events: auto; border: 0; background: transparent; transition: none; max-height: none; height: 100%; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-header { height: 43px; min-height: 43px; padding: 0 14px 0 8px; border: 0; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-icon-btn { width: 26px; height: 26px; border: 0; border-radius: 0; background: transparent; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-icon-btn:hover { background: var(--price-watchlist-hover); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-title-btn { padding: 0; border-radius: 0; color: var(--fund-sidebar-text-primary); font-size: var(--fund-sidebar-meta-size); line-height: 18px; font-weight: 600; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-col-header { display: flex; height: 24px; padding: 0 8px; border-bottom: 1px solid var(--price-watchlist-rule); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-col-header span { font: 400 10px/14px var(--tos-font-ui); letter-spacing: 0.06em; color: var(--fund-sidebar-text-muted); padding: 0; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-hdr-sym { flex: 1 0 72px; min-width: 72px; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) :is(.wl-hdr-last, .wl-hdr-chg, .wl-cell-last, .wl-cell-chg) { display: block; flex: 1 0 56px; min-width: 56px; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) :is(.wl-hdr-chgpct, .wl-cell-chgpct) { flex: 1 0 60px; min-width: 60px; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-col-header span:hover { color: var(--fund-sidebar-text-primary); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-list { display: flex; flex-direction: column; gap: 0; padding: 0; overflow-x: hidden; scrollbar-width: none; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-list::-webkit-scrollbar { width: 0; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-row { position: relative; height: 30px; min-height: 30px; padding: 0 8px; margin: 0; border: 0; border-bottom: 1px solid var(--price-watchlist-rule); border-radius: 0; background: transparent; display: flex; align-items: center; gap: 0; flex-shrink: 0; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-row.active { background: transparent; box-shadow: inset 0 0 0 1px var(--price-watchlist-selection-outline); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-row:hover { background: var(--price-watchlist-hover); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-row.drag-over { border-top: 2px solid var(--tos-accent); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-ticker-cell { flex: 1 0 72px; min-width: 72px; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-sym-text { color: var(--fund-sidebar-text-primary); font-size: var(--fund-sidebar-label-size); line-height: 18px; font-weight: 400; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) :is(.wl-cell-last, .wl-cell-chg, .wl-cell-chgpct) { font-size: 13px; line-height: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) :is(.wl-cell-chg, .wl-cell-chgpct).down { color: var(--fund-danger); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) :is(.wl-cell-chg, .wl-cell-chgpct).up { color: var(--fund-success); }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-logo { width: 15px; height: 15px; flex: 0 0 15px; margin-right: 6px; border-radius: 0; background: transparent; }
    html.sidebar-preview :is(#preview-watchlist, #fund-unified-watchlist-slot) .wl-logo img { object-fit: contain; }

    #preview-watchlist-resize {
      position: relative;
      flex: 0 0 4px;
      width: 4px;
      min-width: 4px;
      align-self: stretch;
      cursor: col-resize;
      background: transparent;
      border-radius: 999px;
      transition:
        background var(--transition-micro),
        opacity var(--transition-micro),
        flex-basis var(--transition-micro),
        width var(--transition-micro),
        min-width var(--transition-micro);
    }
    #preview-watchlist-resize::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 1px;
      border-radius: inherit;
      background: transparent;
      transition: background var(--transition-micro);
    }
    #preview-watchlist-resize:hover,
    #preview-watchlist-resize.is-active,
    #preview-watchlist-resize:focus-visible {
      outline: none;
    }
    #preview-watchlist-resize:hover::before,
    #preview-watchlist-resize.is-active::before,
    #preview-watchlist-resize:focus-visible::before {
      background: var(--fund-sidebar-handle-active);
    }
    #preview-watchlist-resize.is-hidden {
      opacity: 0;
      pointer-events: none;
      flex-basis: 0;
      width: 0;
      min-width: 0;
    }

html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) {
 --tos-font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
 --fund-sidebar-label-size:13px; --fund-sidebar-meta-size:12px;
 --fund-sidebar-text-primary:#ededed; --fund-sidebar-text-muted:#a1a1aa;
 --fund-success:#7ab08a; --fund-danger:#c27878; --price-watchlist-rule:#404040;
 --price-watchlist-hover:#363636; --price-watchlist-selection-outline:#fff;
 --fund-sidebar-handle-active:rgba(200,200,200,.32);
 font-family:var(--tos-font-ui);
}
html.sidebar-preview[data-theme="light"] :is(#preview-watchlist,#fund-unified-watchlist-slot) {
 --fund-sidebar-text-primary:#111827; --fund-sidebar-text-muted:#4B5563;
 --fund-success:#2d4a3e; --fund-danger:#8d4a4a; --price-watchlist-rule:#dedede;
 --price-watchlist-hover:#e8e8e8; --price-watchlist-selection-outline:#000;
 --fund-sidebar-handle-active:rgba(100,100,100,.32);
}
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) .wl-sidebar,
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) button { font-family:var(--tos-font-ui); }
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) .wl-title-btn { flex:initial; font-family:var(--tos-font-ui); }
html.sidebar-preview #wl-add-btn { display:none; }
html.sidebar-preview #preview-watchlist { overflow:visible; }
html.sidebar-preview #preview-watchlist[aria-hidden="true"] { overflow:hidden; }
#preview-watchlist-resize { position:absolute; top:0; bottom:0; right:-4px; z-index:204; height:100%; }
html.sidebar-preview:not(.preview-watchlist-open) #preview-watchlist-resize { display:none; }
html.sidebar-preview.preview-watchlist-resizing body,
html.sidebar-preview.preview-watchlist-resizing #preview-watchlist { transition:none; user-select:none; cursor:col-resize; }
html.sidebar-preview.preview-watchlist-resizing * { cursor:col-resize !important; }
html.sidebar-preview.preview-watchlist-resizing iframe { pointer-events:none; }
html.sidebar-preview #preview-watchlist { position:fixed; inset:0 auto 0 68px; width:0; z-index:202; box-sizing:border-box; background:#fafafa; color:#111827; transition:width 380ms ease; }
html.sidebar-preview.preview-watchlist-open #preview-watchlist { width:var(--preview-watchlist-width); border-right:1px solid var(--price-watchlist-rule); }
html.sidebar-preview[data-theme="dark"] #preview-watchlist { background:#272727; color:#ededed; }
html.sidebar-preview.preview-watchlist-resizing #preview-watchlist { transition:none; }
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar { background:#272727; }
html.sidebar-preview.preview-native-panel[data-theme="light"] #fundamentals-container #fund-sidebar { background:#fafafa; }

/* Match the glass navbar material on the rail and watchlist. */
html.sidebar-preview:has(body > .page) body > .atmo {
  position:fixed;
  inset:0 0 auto 0;
}
html.sidebar-preview #preview-rail,
html.sidebar-preview #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar {
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
}
html.sidebar-preview[data-theme="light"] #preview-rail,
html.sidebar-preview[data-theme="light"] #preview-watchlist,
html.sidebar-preview.preview-native-panel[data-theme="light"] #fundamentals-container #fund-sidebar {
  background:rgba(255,255,255,.55);
  border-right:.6px solid rgba(15,17,22,.08);
}
html.sidebar-preview[data-theme="dark"] #preview-rail,
html.sidebar-preview[data-theme="dark"] #preview-watchlist,
html.sidebar-preview.preview-native-panel[data-theme="dark"] #fundamentals-container #fund-sidebar {
  background:rgba(35,36,40,.6);
  border-right:.6px solid rgba(255,255,255,.10);
}
html.sidebar-preview #preview-rail a[aria-current="page"] { background:rgba(15,17,22,.06); }
html.sidebar-preview[data-theme="dark"] #preview-rail a[aria-current="page"] { background:rgba(255,255,255,.08); }

/* Floating glass surfaces: preserve the 68px navigation rail inside an 8px gutter. */
:root.sidebar-preview { --preview-rail-width:84px; }
:root.sidebar-preview.preview-watchlist-open { --preview-content-left:calc(var(--preview-rail-width) + var(--preview-watchlist-width) + 8px); }
html.sidebar-preview #preview-rail {
  inset:8px auto 8px 8px;
  width:68px;
  border-radius:8px;
  overflow:hidden;
}
html.sidebar-preview #preview-watchlist {
  inset:8px auto 8px var(--preview-rail-width);
  border-radius:8px;
}
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar {
  top:8px !important;
  bottom:8px !important;
  left:var(--preview-rail-width) !important;
  height:calc(100dvh - 16px) !important;
  border-radius:8px;
}
html.sidebar-preview.preview-native-panel .fund-sidebar-resize-handle {
  top:8px !important;
  bottom:8px !important;
  left:calc(var(--preview-rail-width) + var(--preview-watchlist-width) - 3px) !important;
  height:calc(100dvh - 16px) !important;
}
html.sidebar-preview[data-theme="light"] #preview-rail,
html.sidebar-preview.preview-watchlist-open[data-theme="light"] #preview-watchlist,
html.sidebar-preview.preview-native-panel[data-theme="light"] #fundamentals-container #fund-sidebar:not(.is-collapsed) {
  border:1px solid rgba(78,94,116,.22);
  box-shadow:0 2px 5px rgba(35,48,70,.04),0 8px 24px rgba(35,48,70,.08);
}
html.sidebar-preview[data-theme="dark"] #preview-rail,
html.sidebar-preview.preview-watchlist-open[data-theme="dark"] #preview-watchlist,
html.sidebar-preview.preview-native-panel[data-theme="dark"] #fundamentals-container #fund-sidebar:not(.is-collapsed) {
  border:1px solid rgba(137,153,176,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
html.sidebar-preview #preview-watchlist[aria-hidden="true"] { border:0; box-shadow:none; }
html.sidebar-preview #preview-watchlist > .wl-sidebar { border-radius:inherit; }
@media (max-width:800px) {
  :root.sidebar-preview.preview-watchlist-open { --preview-content-left:var(--preview-rail-width); }
  html.sidebar-preview.preview-watchlist-open #preview-watchlist { max-width:calc(100vw - var(--preview-rail-width) - 8px); }
}
/* Join the expanded watchlist to the rail without an intervening gutter. */
html.sidebar-preview #preview-watchlist { left:calc(var(--preview-rail-width) - 8px); }
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar { left:calc(var(--preview-rail-width) - 8px) !important; }
html.sidebar-preview.preview-native-panel .fund-sidebar-resize-handle { left:calc(var(--preview-rail-width) - 8px + var(--preview-watchlist-width) - 3px) !important; }
:root.sidebar-preview.preview-watchlist-open { --preview-content-left:calc(var(--preview-rail-width) + var(--preview-watchlist-width)); }
html.sidebar-preview.preview-watchlist-open #preview-rail { border-top-right-radius:0; border-bottom-right-radius:0; }
html.sidebar-preview.preview-watchlist-open #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar:not(.is-collapsed) { border-top-left-radius:0; border-bottom-left-radius:0; }
@media (max-width:800px) {
  :root.sidebar-preview.preview-watchlist-open { --preview-content-left:var(--preview-rail-width); }
}
/* Align the top edge of the connected sidebar with both navbar groups. */
:root.sidebar-preview { --preview-chrome-top:12px; }
html.sidebar-preview #preview-rail,
html.sidebar-preview #preview-watchlist { top:var(--preview-chrome-top); }
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar,
html.sidebar-preview.preview-native-panel .fund-sidebar-resize-handle {
  top:var(--preview-chrome-top) !important;
  height:calc(100dvh - var(--preview-chrome-top) - 8px) !important;
}
html.sidebar-preview.glass-nav #unified-navigation-rail { padding-top:var(--preview-chrome-top) !important; }
html.sidebar-preview.glass-nav .gn-wrap { align-items:flex-start; }

html.sidebar-preview .nav,
html.sidebar-preview .gnav { padding-top:var(--preview-chrome-top); }

/* Keep a single fine seam where the two glass surfaces meet. */
html.sidebar-preview.preview-watchlist-open #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar:not(.is-collapsed) { border-left:0 !important; }
/* One animated outer surface keeps the rounded edge attached to the moving panel. */
html.sidebar-preview::before {
  content:'';
  position:fixed;
  top:var(--preview-chrome-top);
  bottom:8px;
  left:8px;
  width:68px;
  box-sizing:border-box;
  z-index:201;
  pointer-events:none;
  border-radius:8px;
  border:1px solid rgba(78,94,116,.22);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 5px rgba(35,48,70,.04),0 8px 24px rgba(35,48,70,.08);
  transition:width 380ms ease;
}
html.sidebar-preview.preview-watchlist-open::before { width:calc(68px + var(--preview-watchlist-width)); }
html.sidebar-preview[data-theme="dark"]::before {
  background:rgba(35,36,40,.6);
  border-color:rgba(137,153,176,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
html.sidebar-preview #preview-rail,
html.sidebar-preview #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.sidebar-preview #preview-rail { border-radius:8px 0 0 8px; }
html.sidebar-preview #preview-rail::after {
  content:''; position:absolute; top:1px; bottom:1px; right:-1px; width:1px;
  background:rgba(78,94,116,.22); opacity:0; pointer-events:none;
  transition:opacity 380ms ease;
}
html.sidebar-preview.preview-watchlist-open #preview-rail::after { opacity:1; }
html.sidebar-preview[data-theme="dark"] #preview-rail::after { background:rgba(137,153,176,.25); }
html.sidebar-preview #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar { border-radius:0 8px 8px 0; }
html.sidebar-preview.preview-watchlist-resizing::before,
html.sidebar-preview:has(#fund-sidebar.is-resizing)::before { transition:none; }
@media (prefers-reduced-motion:reduce) {
  html.sidebar-preview::before,html.sidebar-preview #preview-rail::after { transition:none; }
}
@media (max-width:800px) {
  html.sidebar-preview.preview-watchlist-open::before { max-width:calc(100vw - 24px); }
}
/* Reserve the outline's pixel so full-row hover fills cannot cover it. */
html.sidebar-preview #preview-rail {
  border:1px solid transparent !important;
  border-radius:8px !important;
  overflow:hidden;
}
html.sidebar-preview #preview-rail .rail-toggle,
html.sidebar-preview #preview-rail #fund-sidebar-toggle { background:transparent; }
html.sidebar-preview #preview-rail .rail-toggle:hover,
html.sidebar-preview #preview-rail #fund-sidebar-toggle:hover { background:var(--preview-hover-fill); }
html.sidebar-preview[data-theme="dark"] #preview-rail .rail-toggle:hover,
html.sidebar-preview[data-theme="dark"] #preview-rail #fund-sidebar-toggle:hover { background:var(--preview-hover-fill); }

/* The rail joins the open panel with square inner corners. */
html.sidebar-preview.preview-watchlist-open #preview-rail {
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
/* Keep row fills flush to the divider and inside the shared outer outline. */
html.sidebar-preview #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar {
  box-sizing:border-box;
  border-right:1px solid transparent !important;
}

/* Place the first visible row rule on the Home highlight's top edge. */
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) .wl-col-header { border-bottom:0; }
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) .wl-row:first-child { border-top:1px solid var(--price-watchlist-rule); }

/* Consistent cool hover fill for the glass sidebar and navigation rail. */
html.sidebar-preview { --preview-hover-fill:#dce5f0; }
html.sidebar-preview[data-theme="dark"] { --preview-hover-fill:#354151; }
html.sidebar-preview[data-theme] :is(#preview-watchlist,#fund-unified-watchlist-slot) { --price-watchlist-hover:var(--preview-hover-fill); }
html.sidebar-preview #preview-rail :is(a,button):hover,
html.sidebar-preview #preview-rail #fund-sidebar-toggle:hover,
html.sidebar-preview[data-theme="dark"] #preview-rail :is(a,button):hover,
html.sidebar-preview[data-theme="dark"] #preview-rail #fund-sidebar-toggle:hover { background:var(--preview-hover-fill); }

/* The shared outer surface alone paints the fill, outline and rounded corners.
   Child borders reserve space but never paint over that outline. The divider
   is an inset line, so it cannot leave a square border miter at either end. */
html.sidebar-preview #preview-rail,
html.sidebar-preview #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar {
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
html.sidebar-preview #preview-watchlist,
html.sidebar-preview.preview-native-panel #fundamentals-container #fund-sidebar {
  border-left:0 !important;
}
html.sidebar-preview #preview-rail { clip-path:none;transition:none; }
html.sidebar-preview #preview-rail::after {
  display:block;right:0;top:1px;bottom:1px;width:1px;
  background:#d9dce1;opacity:0;transition:opacity 180ms ease;
}
html.sidebar-preview.preview-watchlist-open #preview-rail::after { opacity:1; }
html.sidebar-preview[data-theme="dark"] #preview-rail::after { background:rgba(137,153,176,.25); }
@media(prefers-reduced-motion:reduce) { html.sidebar-preview #preview-rail::after { transition:none; } }

/* One continuous layout across the full 220–337px resize range.
   Keep the symbol track, inset and logo gap fixed; only numeric tracks grow. */
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) :is(.wl-col-header,.wl-row){display:grid!important;grid-template-columns:58px minmax(48px,1fr) minmax(42px,.85fr) minmax(48px,1fr);gap:3px!important;padding-left:8px!important;padding-right:8px!important}
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) :is(.wl-hdr-sym,.wl-hdr-last,.wl-hdr-chg,.wl-hdr-chgpct,.wl-ticker-cell,.wl-cell-last,.wl-cell-chg,.wl-cell-chgpct){min-width:0!important;width:auto!important;flex:none!important}
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) .wl-logo{width:15px!important;height:15px!important;flex:0 0 15px!important;margin-right:6px!important}
html.sidebar-preview :is(#preview-watchlist,#fund-unified-watchlist-slot) .wl-sym-text{flex:none!important;transition:none!important}

/* Highlight the actual rounded frame instead of drawing a separate straight edge. */
html#glass-home-preview.sidebar-preview #preview-watchlist-resize::before { background:transparent!important; }
html#glass-home-preview.sidebar-preview:has(#preview-watchlist-resize:is(:hover,:focus-visible,.is-active))::before,
html#glass-home-preview.sidebar-preview.preview-watchlist-resizing::before { border-color:rgba(78,94,116,.48)!important; }
html#glass-home-preview.sidebar-preview[data-theme="dark"]:has(#preview-watchlist-resize:is(:hover,:focus-visible,.is-active))::before,
html#glass-home-preview.sidebar-preview[data-theme="dark"].preview-watchlist-resizing::before { border-color:rgba(163,181,207,.6)!important; }

/* One interaction contract for every page's standalone or chart watchlist.
   These component-owned rules outrank page chrome, including legacy theme
   overrides. They apply on first paint and preserve the selected-row outline. */
html.sidebar-preview {
  --watchlist-row-hover:#e8e8e8;
  --watchlist-row-divider:#dedede;
}
html.sidebar-preview[data-theme="dark"] {
  --watchlist-row-hover:#363636;
  --watchlist-row-divider:#404040;
}
html.sidebar-preview :is(#preview-watchlist,#fundamentals-container #fund-unified-watchlist-slot) .wl-row {
  border-bottom:1px solid var(--watchlist-row-divider) !important;
}
html.sidebar-preview :is(#preview-watchlist,#fundamentals-container #fund-unified-watchlist-slot) .wl-row:hover {
  background:var(--watchlist-row-hover) !important;
}