/* ── Loading ── */
    .loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      inset: 0;
      background: var(--bg);
      color: var(--text-2);
      z-index: 9999;
      opacity: 0;
      animation: loadingEnter 0.4s ease 0.1s forwards;
    }
    @keyframes loadingEnter {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .loading p {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: var(--ls-slight);
      opacity: 0;
      animation: loadTextFade 0.4s ease 0.3s forwards;
      transition: opacity var(--duration-slow) ease;
    }

    .loading-dots {
      display: flex;
      gap: 6px;
      margin-top: 16px;
    }
    .loading-dot {
      width: 4px;
      height: 4px;
      border-radius: 6px;
      background: var(--text-3);
      animation: dotBounce 1.2s ease-in-out infinite;
    }
    .loading-dot:nth-child(2) { animation-delay: 0.15s; }
    .loading-dot:nth-child(3) { animation-delay: 0.3s; }

    @keyframes dotBounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
      40% { transform: scale(1.2); opacity: 1; }
    }

    @keyframes loadTextFade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .spinner {
      display: none;
    }
    .loading-logo {
      width: 120px;
      margin-bottom: 32px;
      animation: logoPulse 1.8s ease-in-out infinite;
    }
    .loading-logo svg {
      width: 100%;
      height: auto;
      display: block;
    }
    @keyframes logoPulse {
      0%, 100% { opacity: 0.3; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) {
      .loading { animation: none; opacity: 1; }
      .loading p { animation: none; opacity: 1; }
    }

    /* ── Summary Cards ── */
    .summary-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 16px 12px;
      position: relative;
      z-index: 10;
      align-items: stretch;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .summary-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .summary-wl-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 0 12px 16px;
    }

    .summary-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 16px;
      position: relative;
      overflow: hidden;
      min-height: 72px;
      box-shadow: var(--shadow-card);
      animation: fadeUp 0.4s ease both;
      transition: background var(--duration-enter) ease, border-color var(--duration-enter) ease, box-shadow var(--duration-enter) ease;
    }

    .summary-card:nth-child(1) { animation-delay: 0.05s; }
    .summary-card:nth-child(2) { animation-delay: 0.10s; }
    .summary-card:nth-child(3) { animation-delay: 0.15s; }
    .summary-card:nth-child(4) { animation-delay: 0.20s; }
    .summary-card:nth-child(5) { animation-delay: 0.25s; }
    .summary-card:nth-child(6) { animation-delay: 0.30s; }

    .summary-card.full { grid-column: 1 / -1; }

    .summary-card.loss-card {
      background: var(--card-loss-bg);
      border-color: var(--card-loss-bdr);
    }

    .summary-label {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--label-color);
      text-shadow: none;
      font-family: var(--font-mono);
      margin-bottom: 8px;
      transition: color var(--duration-slow) ease;
    }

    .summary-value {
      font-family: var(--font-mono);
      font-size: clamp(20px, 5vw, 28px);
      font-weight: 400;
      color: var(--text-1);
      letter-spacing: var(--ls-tight);
      transition: color var(--duration-slow) ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .summary-value.green { color: var(--emerald); }
    .summary-value.red { color: var(--red); }

    .summary-sub {
      font-size: 12px;
      margin-top: 4px;
      font-family: var(--font-mono);
      color: var(--text-3);
    }

    /* ── Hero Card v2 ── */
    .hero-section {
      padding: 16px var(--content-px) 0;
      position: relative;
      z-index: 10;
    }
    .hero-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      padding: 16px 20px 20px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
    }
    [data-theme="dark"] .hero-card {
      background: linear-gradient(135deg, rgba(20,25,50,0.7) 0%, rgba(15,20,40,0.5) 100%);
    }
    .hero-split {
      display: flex;
      align-items: flex-start;
    }
    .hero-card-left {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding-right: 24px;
    }
    .hero-card-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 24px;
    }
    .hero-income-label {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--label-color);
      margin-bottom: 6px;
    }
    .hero-income-currency {
      font-family: var(--font-mono);
      font-size: clamp(18px, 4vw, 24px);
      font-weight: 400;
      color: var(--emerald);
      letter-spacing: var(--ls-slight);
      margin-bottom: 2px;
      line-height: var(--lh-none);
    }
    .hero-income-value {
      font-family: var(--font-mono);
      font-size: clamp(36px, 10vw, 56px);
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      color: var(--emerald);
      line-height: var(--lh-none);
      margin-bottom: 20px;
    }
    .hero-legend {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: auto;
    }
    .hero-legend-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hero-legend-dot {
      width: 7px;
      height: 7px;
      border-radius: 4px;
      flex-shrink: 0;
    }
    .hero-legend-label {
      font-size: 12px;
      color: var(--text-3);
      flex: 1;
    }
    .hero-legend-amount {
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-mono);
      flex-shrink: 0;
      color: var(--text-2);
    }
    .hero-donut-wrap {
      position: relative;
      width: 100%;
      max-width: 200px;
      aspect-ratio: 1;
      flex-shrink: 0;
      overflow: visible;
    }
    .hero-donut-wrap svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .hero-donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      cursor: pointer;
    }
    .hero-center-label {
      font-size: 9px;
      color: var(--text-3);
      font-weight: 400;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .hero-center-value {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 400;
      color: var(--emerald);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-none);
    }
    .hero-center-sub {
      font-size: 10px;
      color: var(--text-3);
      margin-top: 4px;
    }
    .hero-metrics {
      display: flex;
      gap: 16px;
      margin-top: 16px;
    }
    .metric-pill {
      flex: 1;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      padding: 16px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
    }
    .metric-pill-label {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--label-color);
      margin-bottom: 6px;
    }
    .metric-pill-value {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-none);
      color: var(--text-1);
    }
    .metric-pill-sub {
      font-size: 12px;
      color: var(--text-3);
      margin-top: 4px;
    }

    /* ── Insight Cards ── */
    .insight-cards-row {
      display: flex;
      gap: 16px;
      padding: 16px var(--content-px) 0;
    }
    .insight-card {
      flex: 1;
      min-width: 0;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
      opacity: 0;
      transform: translateY(16px);
      animation: insightCardIn 0.7s var(--ease-out) forwards;
    }
    .insight-card:nth-child(2) {
      animation-delay: 0.1s;
    }
    @keyframes insightCardIn {
      to { opacity: 1; transform: translateY(0); }
    }
    .insight-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    .insight-card-label {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--label-color);
      margin-bottom: 4px;
    }
    .insight-card-status {
      font-size: 14px;
      font-weight: 400;
      line-height: var(--lh-tight);
    }
    .insight-card-right-label {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-3);
      text-align: right;
    }
    .insight-card-value {
      font-family: var(--font-mono);
      font-size: 28px;
      font-weight: 800;
      letter-spacing: var(--ls-tight);
      color: var(--text-1);
      line-height: var(--lh-none);
    }
    .insight-card-change {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 400;
      padding: 4px 8px;
      border-radius: 10px;
    }
    .insight-bar-group {
      display: flex;
      flex-direction: column;
    }
    .insight-bar-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .insight-bar-label {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-3);
    }
    .insight-bar-pct {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      color: var(--text-2);
    }
    .insight-bar-track {
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 6px;
      overflow: visible;
      position: relative;
      border: 1px solid rgba(255,255,255,0.04);
    }
    .insight-bar-fill {
      height: 100%;
      border-radius: 10px;
      width: 0;
      transition: width 1.2s var(--ease-out);
      background-blend-mode: screen;
    }

    /* ── Tick bar (vertical bars progress) ── */
    .progress-bar {
      position: relative;
      width: 100%;
      height: 8px;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      margin-bottom: 10px;
      overflow: hidden;
    }
    [data-theme="light"] .progress-bar {
      background: rgba(15,23,42,0.06);
    }
    .progress-bar-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-radius: 6px;
      width: 0%;
      transition: width 0.8s var(--ease-out);
    }
    .insight-bar-days {
      background: var(--text-3);
    }
    .insight-bar-tick {
      position: absolute;
      top: -3px;
      bottom: -3px;
      width: 2px;
      background: var(--text-2);
      border-radius: 2px;
      transition: left 1.2s var(--ease-out);
    }
    .insight-pace-line {
      position: absolute;
      top: -3px;
      bottom: -3px;
      width: 1.5px;
      background: rgba(255,255,255,0.5);
      border-radius: 2px;
      z-index: 2;
      transition: left 1.2s var(--ease-out);
      pointer-events: none;
    }
    .sparkline-wrap {
      position: relative;
      height: 120px;
      margin-top: 4px;
    }
    .sparkline-wrap svg {
      width: 100%;
      height: 100%;
    }
    .sparkline-dots-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .spark-dot-el {
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      pointer-events: auto;
      cursor: pointer;
      transition: transform var(--duration-fast) ease, width var(--duration-fast) ease, height var(--duration-fast) ease;
    }
    .spark-dot-el.visible { transform: translate(-50%, -50%) scale(1); }
    .spark-dot-el:hover {
      transform: translate(-50%, -50%) scale(1.5);
    }
    .sparkline-tooltip {
      position: absolute;
      padding: 4px 8px;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-mono);
      color: #fff;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -100%) translateY(-8px);
      transition: opacity var(--duration-fast) ease;
      white-space: nowrap;
      z-index: 10;
    }
    .sparkline-tooltip.visible { opacity: 1; }
    @media (hover: none) {
      .sparkline-tooltip {
        font-size: 14px;
        padding: 6px 12px;
        transform: translate(-50%, -100%) translateY(-28px);
      }
    }
    .sparkline-labels {
      display: flex;
      justify-content: space-between;
      padding: 4px 2px 0;
    }
    .sparkline-labels span {
      font-size: 9px;
      font-weight: 400;
      color: var(--text-3);
      letter-spacing: var(--ls-slight);
    }
    .sparkline-clip rect {
      transition: width 1.4s var(--ease-out);
    }
    @keyframes sparkDraw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes sparkAreaIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes sparkDotIn {
      from { opacity: 0; transform: scale(0); }
      to { opacity: 1; transform: scale(1); }
    }
    @media (max-width: 700px) {
      .insight-cards-row {
        flex-direction: column;
      }
    }

    /* Mobile: keep hero side-by-side, shrink donut */
    @media (max-width: 600px) {
      .hero-split {
        flex-direction: row;
        align-items: center;
      }
      .hero-card-left {
        padding-right: 12px;
      }
      .hero-card-right {
        padding-left: 12px;
      }
      .hero-donut-wrap {
        width: 100%;
        max-width: 140px;
      }
      .hero-center-value {
        font-size: 14px;
      }
      .hero-center-label {
        font-size: 9px;
      }
      .hero-income-value {
        font-size: 24px;
      }
      .hero-center-sub {
        font-size: 9px;
      }
    }

    /* ── Winner / Loser Cards ── */
    .wl-card {
      overflow: hidden;
      min-width: 0;
    }

    .wl-card.hidden-card {
      display: none;
    }

    .wl-inner {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .wl-left {
      flex: 1;
      min-width: 0;
    }

    .wl-right {
      flex-shrink: 0;
      text-align: right;
    }

    .wl-card.winner {
      background: linear-gradient(135deg, rgba(74,222,128,0.15), var(--glass-bg));
      border-color: rgba(74,222,128,0.25);
    }

    .wl-card.loser {
      background: linear-gradient(135deg, rgba(220,38,38,0.1), var(--glass-bg));
      border-color: rgba(220,38,38,0.2);
    }

    .wl-label {
      font-size: 9px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: var(--ls-spread);
      font-family: var(--font-mono);
      opacity: 0.7;
    }

    .wl-ticker {
      font-weight: 400;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .wl-roi {
      font-weight: 400;
      font-size: clamp(11px, 3vw, 13px);
      font-family: var(--font-mono);
      white-space: nowrap;
    }

    .wl-pnl {
      font-weight: 400;
      font-size: clamp(10px, 2.8vw, 11px);
      font-family: var(--font-mono);
      opacity: 0.7;
      white-space: nowrap;
    }

    .wl-card.winner .wl-ticker,
    .wl-card.winner .wl-roi,
    .wl-card.winner .wl-pnl,
    .wl-card.winner .wl-label { color: var(--emerald); }

    .wl-card.loser .wl-ticker,
    .wl-card.loser .wl-roi,
    .wl-card.loser .wl-pnl,
    .wl-card.loser .wl-label { color: var(--red); }

    /* ── Filter Row / Chips ── */
    /* ── Generic sliding pill track ── */
    .pill-track {
      display: inline-flex;
      position: relative;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 4px;
      box-shadow: var(--shadow-subtle);
      gap: 0;
      transition: background var(--duration-slow) ease, border-color var(--duration-slow) ease;
    }

    .pill-track.txn-type-track {
      display: flex;
      width: 100%;
    }
    .txn-type-track .pill-track-btn {
      flex: 1;
      flex-shrink: 1;
      min-width: 0;
      padding: 8px 4px;
      text-align: center;
      font-size: 12px;
    }
    @media (max-width: 380px) {
      .txn-type-track .pill-track-btn { font-size: 10px; padding: 6px 2px; }
    }

    .sliding-pill {
      position: absolute;
      top: 4px;
      height: calc(100% - 8px);
      background: var(--blue);
      border: none;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(74,124,255,0.3);
      transition: left var(--duration-enter) var(--ease-spring),
                  width var(--duration-enter) var(--ease-spring);
      pointer-events: none;
      z-index: 1;
      backdrop-filter: none;
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .sliding-pill.gooping { animation: pillGoop 0.6s var(--ease-out); }
    @keyframes pillGoop {
      0%   { scale: 1 1; }
      25%  { scale: 1.06 0.92; }
      50%  { scale: 0.98 1.03; }
      80%  { scale: 1.01 0.995; }
      100% { scale: 1 1; }
    }

    .pill-track-btn {
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-sans);
      cursor: pointer;
      border: none;
      color: var(--text-2);
      background: transparent;
      transition: color var(--duration-normal) ease;
      white-space: nowrap;
      user-select: none;
    }

    .pill-track-btn.active {
      color: #ffffff;
    }

    .filter-row {
      display: flex;
      gap: 8px;
      padding: 12px var(--content-px);
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      position: relative;
      z-index: 10;
    }

    .filter-row::-webkit-scrollbar { display: none; }

    .filter-track {
      display: inline-flex;
      position: relative;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 4px;
      box-shadow: var(--shadow-card);
      gap: 0;
      transition: all var(--duration-enter) ease;
    }

    .filter-pill {
      position: absolute;
      top: 4px;
      height: calc(100% - 8px);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      box-shadow: none;
      transition: left var(--duration-enter) var(--ease-spring),
                  width var(--duration-enter) var(--ease-spring);
      pointer-events: none;
      z-index: 1;
      backdrop-filter: blur(12px);
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .filter-pill.gooping { animation: pillGoop 0.6s var(--ease-out); }

    .filter-chip {
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      padding: 8px 20px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-sans);
      cursor: pointer;
      border: none;
      color: var(--text-2);
      background: transparent;
      transition: color var(--duration-normal) ease;
      white-space: nowrap;
      user-select: none;
    }

    .filter-chip.active {
      color: var(--text-1);
    }

    /* ── Tabs ── */
    .tabs {
      display: flex;
      gap: 0;
      padding: 16px 24px 0;
      border-bottom: 1px solid var(--divider);
      position: relative;
      z-index: 10;
      transition: border-color var(--duration-slow) ease;
    }

    /* ── Bottom tabs (fixed) ── */
    .txn-bottom-tabs {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background: var(--bg);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: none;
      border-top: none;
      box-shadow: none;
      padding: 12px var(--content-px) max(12px, env(safe-area-inset-bottom));
      justify-content: center;
      transition: background var(--duration-slow) ease, backdrop-filter var(--duration-slow) ease, -webkit-backdrop-filter var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
    }
    .txn-bottom-tabs.scrolled {
      background: rgba(20,20,20,0.7);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      box-shadow: inset 0 1px 0 var(--divider);
    }
    [data-theme="light"] .txn-bottom-tabs.scrolled {
      background: rgba(250,250,250,0.7);
    }
    /* ── Consistent bottom spacing for all tab/page content ──
         Uses ::after to guarantee a fixed-height spacer at the end
         of every tab, regardless of internal structure. Also zeros
         bottom margin on known last-content elements so the gap
         is purely controlled here. ── */
    #txnOverviewTab,
    #txnBreakdownTab,
    #txnSummaryTab,
    #txnListTab,
    #advisorTab,
    .categories-content {
      padding-bottom: 0;
    }
    #txnOverviewTab::after,
    #txnBreakdownTab::after,
    #txnSummaryTab::after,
    #txnListTab::after,
    #advisorTab::after,
    .categories-content::after {
      content: '';
      display: block;
      height: 24px;
      flex-shrink: 0;
    }
    /* Zero trailing margins so only the ::after spacer controls the gap */
    #breakdownContent > .breakdown-section:last-child {
      margin-bottom: 0 !important;
    }
    #txnSummaryTab > .charts-section:last-child,
    #txnSummaryTab > .insights-bottom-row:last-of-type,
    #txnSummaryTab > .insights-donuts-row:last-of-type {
      padding-bottom: 0 !important;
    }
    .txn-list-container > .txn-date-group:last-child {
      margin-bottom: 0 !important;
    }

    .txn-tab-spacer, .portfolio-tab-spacer {
      height: 56px;
    }
    @media (max-width: 767px) {
      .txn-tab-spacer, .portfolio-tab-spacer {
        height: 100px;
      }
    }

    .tab {
      padding: 8px 12px 12px;
      font-size: 14px;
      font-weight: 400;
      color: var(--text-3);
      cursor: pointer;
      position: relative;
      transition: color var(--duration-normal);
      white-space: nowrap;
    }
    /* Tab icons — hidden on desktop, shown on mobile */
    .tab-icon {
      display: none;
    }
    @media (max-width: 767px) {
      /* ── Floating Pill Tab Bar (matches home hub button) ── */
      .txn-bottom-tabs {
        position: static;
        background: rgba(15,18,35,0.65) !important;
        backdrop-filter: blur(50px) saturate(200%) brightness(1.15) !important;
        -webkit-backdrop-filter: blur(50px) saturate(200%) brightness(1.15) !important;
        border-radius: 32px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-top: none !important;
        box-shadow: var(--shadow-lg) !important;
        height: 64px;
        padding: 0 8px !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        overflow: hidden;
      }
      .txn-bottom-tabs::before,
      .txn-bottom-tabs::after {
        display: none !important;
      }
      .txn-bottom-tabs.scrolled {
        background: rgba(15,18,35,0.65) !important;
        backdrop-filter: blur(50px) saturate(200%) brightness(1.15) !important;
        -webkit-backdrop-filter: blur(50px) saturate(200%) brightness(1.15) !important;
        box-shadow: var(--shadow-lg) !important;
      }
      [data-theme="light"] .txn-bottom-tabs {
        background: rgba(255,255,255,0.75) !important;
        border-color: rgba(0,0,0,0.06) !important;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.02), 0 4px 24px rgba(0,0,0,0.08) !important;
      }
      [data-theme="light"] .txn-bottom-tabs.scrolled {
        background: rgba(255,255,255,0.85) !important;
      }
      .txn-bottom-tabs .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 16px 4px;
        flex: 1;
        font-size: 10px;
        font-weight: 400;
        border-radius: 16px;
        color: var(--text-3);
        transition: color var(--duration-normal) ease;
      }
      .txn-bottom-tabs .tab-icon {
        display: block;
        width: 24px;
        height: 24px;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: stroke-width var(--duration-normal) ease;
      }
      .txn-bottom-tabs .tab.active {
        color: var(--blue);
      }
      .txn-bottom-tabs .tab.active .tab-icon {
        stroke-width: 2;
      }
      .txn-bottom-tabs .tab-label {
        display: none;
      }
      .txn-bottom-tabs .tab-underline,
      .txn-bottom-tabs #txnTabUnderline {
        display: none !important;
      }
    }
    @media (max-width: 400px) {
      .tab { padding: 8px 8px 12px; font-size: 12px; }
      .tabs { padding: 16px var(--content-px) 0; }
    }

    .tab.active { color: var(--text-1); }
    .tab-divider {
      width: 1px;
      height: 16px;
      background: var(--divider);
      align-self: center;
      margin: 0 2px;
      flex-shrink: 0;
    }

    .tab-underline {
      position: absolute;
      bottom: -1px;
      height: 1.5px;
      background: var(--text-1);
      border-radius: 4px;
      box-shadow: none;
      transition: left var(--duration-slow) var(--ease-spring),
                  width var(--duration-slow) var(--ease-spring);
      pointer-events: none;
    }

    /* ── Section Titles ── */
    .section-title {
      font-size: 9px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: var(--ls-spread);
      color: var(--text-3);
      font-family: var(--font-mono);
      padding: 20px 20px 10px;
      transition: color var(--duration-slow) ease;
    }

    /* ── Holdings (Card View) ── */
    .holdings-list { padding: 8px var(--content-px); position: relative; z-index: 10; }

    .holding-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid var(--divider);
      animation: fadeUp 0.4s ease both;
      transition: border-color var(--duration-slow) ease;
    }

    .holding-item:last-child { border-bottom: none; }

    .holding-left h3 {
      font-size: 16px;
      font-weight: 400;
      color: var(--text-1);
      transition: color var(--duration-slow) ease;
    }

    .holding-left .type-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 400;
      font-family: var(--font-mono);
      padding: 4px 8px;
      border-radius: 10px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--text-2);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: var(--ls-caps);
      transition: all var(--duration-enter) ease;
    }

    .holding-left .live-price {
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-mono);
      color: var(--text-2);
      margin-top: 2px;
      transition: color var(--duration-slow) ease;
    }

    .holding-right { text-align: right; }

    .holding-right .shares {
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-mono);
      color: var(--text-2);
      transition: color var(--duration-slow) ease;
    }

    .holding-right .value {
      font-size: 16px;
      font-weight: 400;
      font-family: var(--font-mono);
      color: var(--text-1);
      transition: color var(--duration-slow) ease;
    }

    .holding-right .avg-price {
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-mono);
      color: var(--text-3);
      transition: color var(--duration-slow) ease;
    }

    .holding-right .pnl {
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-mono);
      margin-top: 2px;
    }

    .pnl.positive { color: var(--emerald); }
    .pnl.negative { color: var(--red); }

    /* ── View Toggle ── */
    .view-toggle {
      display: flex;
      gap: 4px;
      padding: 10px 20px 0;
    }

    /* ── Compact table ── */
    .compact-table {
      min-width: 0 !important;
      table-layout: fixed;
    }

    .compact-table th,
    .compact-table td {
      padding: 10px 8px !important;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .compact-table th:first-child,
    .compact-table td:first-child {
      width: 30%;
      padding-left: 16px !important;
    }

    .compact-table th:nth-child(2),
    .compact-table td:nth-child(2) {
      width: 18%;
    }

    .compact-table th:nth-child(3),
    .compact-table td:nth-child(3) {
      width: 26%;
    }

    .compact-table th:nth-child(4),
    .compact-table td:nth-child(4) {
      width: 26%;
    }

    .compact-stack {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: var(--lh-normal);
    }

    .compact-roi {
      font-size: 10px;
      opacity: 0.7;
    }

    /* ── Tables ── */
    .table-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 4px 0;
      position: relative;
      z-index: 10;
    }

    /* ── Holdings Cards ── */
    .holdings-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 8px 0;
    }
    .holding-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      border-bottom: 1px solid var(--divider);
      cursor: pointer;
      transition: background var(--duration-fast) ease;
      opacity: 0;
      transform: translateY(8px);
      animation: fadeUp 0.4s ease both;
      position: relative;
    }
    .holding-card:last-child { border-bottom: none; }
    .holding-card:hover {
      background: var(--surface-subtle);
      margin: 0 -12px;
      padding: 16px 12px;
      border-radius: 12px;
    }
    [data-theme="light"] .holding-card:hover {
      background: var(--surface-subtle);
    }
    .holding-card-left-group {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }
    .holding-card-logo {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      object-fit: contain;
      flex-shrink: 0;
      background: transparent;
    }
    .holding-card-logo-fallback {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      flex-shrink: 0;
      opacity: 0.8;
    }
    .holding-card-left {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .holding-card-ticker-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .holding-card-ticker {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
    }
    .holding-card-badge {
      font-size: 9px;
      font-weight: 400;
      padding: 2px 6px;
      border-radius: 6px;
      letter-spacing: var(--ls-slight);
    }
    .holding-card-sub {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-3);
    }
    .holding-card-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      flex-shrink: 0;
    }
    .holding-card-value {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
    }
    .holding-card-pnl {
      display: flex;
      align-items: baseline;
      gap: 4px;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .pnl-sep {
      color: var(--text-3);
      opacity: 0.4;
      font-weight: 300;
    }
    .holding-card-weight-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      border-radius: 2px;
      opacity: 0.4;
      transition: width 0.8s var(--ease-out);
    }

    .trade-type-badge {
      width: 10px;
      height: 10px;
      border-radius: 4px;
      flex-shrink: 0;
    }

    /* ── Mobile/Desktop visibility ── */
    @media (min-width: 768px) {
      .mobile-only { display: none !important; }
    }
    @media (max-width: 767px) {
      .desktop-only { display: none !important; }
    }

    /* ── Portfolio Hero Card (mobile) ── */
    .port-hero {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 84px);
      left: 0;
      right: 0;
      padding: 0 var(--content-px) 12px;
      text-align: left;
      z-index: 110;
      background: transparent;
    }
    .port-hero-gradient {
      display: none;
    }
    .port-hero-spacer {
      height: 345px;
    }
    .port-hero-content {
      position: relative;
      z-index: 1;
    }
    .port-hero-label {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
      margin-bottom: 8px;
      display: block;
    }
    .port-hero-value {
      font-family: var(--font-sans);
      font-size: 42px;
      font-weight: 400;
      color: var(--text-1);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-tight);
    }
    .port-hero-alloc {
      display: block;
      margin-top: 8px;
      font-size: 13px;
      font-weight: 400;
      color: var(--text-3);
      letter-spacing: var(--ls-slight);
    }
    .port-hero-pnl {
      margin-top: 12px;
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    /* Action buttons */
    .port-hero-actions {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: flex-start;
      gap: 24px;
      margin-top: 24px;
    }
    .port-hero-action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--text-2);
      font-size: 12px;
      font-family: var(--font-sans);
      font-weight: 400;
    }
    .port-hero-action-btn svg {
      width: 48px;
      height: 48px;
      padding: 12px;
      border-radius: 50%;
      border: 1.5px solid var(--divider);
      background: rgba(255,255,255,0.04);
      transition: all var(--duration-fast) ease;
    }
    .port-hero-action-btn:active svg {
      background: rgba(74,124,255,0.15);
      border-color: var(--blue);
    }
    /* Stats row */
    .port-hero-stats {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 10px;
      margin-top: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 4px;
      /* Bleed to screen edges so cards clip at viewport, not content padding */
      margin-left: calc(-1 * var(--content-px));
      margin-right: calc(-1 * var(--content-px));
      padding-left: var(--content-px);
      padding-right: var(--content-px);
    }
    .port-hero-stats::-webkit-scrollbar { display: none; }
    .port-hero-stat {
      flex: 0 0 auto;
      min-width: 140px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 8px 12px;
      text-align: left;
    }
    [data-theme="light"] .port-hero-stat {
      background: rgba(255,255,255,0.7);
      border-color: rgba(15,23,42,0.06);
    }
    [data-theme="light"] .port-hero-gradient {
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 25% 30%, rgba(99,102,241,0.05) 0%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 75% 20%, rgba(14,165,233,0.04) 0%, transparent 100%);
    }
    [data-theme="light"] .port-hero-action-btn svg {
      border-color: rgba(15,23,42,0.1);
      background: rgba(255,255,255,0.6);
    }
    [data-theme="light"] .port-hero-action-btn:active svg {
      background: rgba(59,130,246,0.08);
      border-color: var(--blue);
    }
    .port-hero-stat-label {
      display: block;
      font-size: 9px;
      font-weight: 400;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
      margin-bottom: 4px;
    }
    .port-hero-stat-value {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
      letter-spacing: var(--ls-tight);
    }

    /* ── Holdings Sort Bar (mobile) ── */
    .holdings-controls {
      padding: 4px 0 0;
    }
    .holdings-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .holdings-nav-row .type-nav {
      width: auto;
      justify-content: flex-start;
    }
    .holdings-sort-wrap {
      display: flex;
      align-items: center;
      position: relative;
      flex-shrink: 0;
    }
    .holdings-sort-text {
      font-size: 14px;
      font-weight: 400;
      color: var(--text-2);
      pointer-events: none;
    }
    .holdings-sort-native {
      position: absolute;
      inset: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      font-size: 16px;
    }
    .holdings-type-pills {
      display: contents;
    }
    .holdings-sort-label {
      font-size: 12px;
      color: var(--text-3);
      margin-right: 2px;
      flex-shrink: 0;
    }
    .holdings-sort-btn {
      padding: 6px 12px;
      border-radius: 10px;
      border: 1px solid var(--glass-border);
      background: transparent;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 400;
      font-family: var(--font-sans);
      cursor: pointer;
      transition: all var(--duration-normal) ease;
      -webkit-tap-highlight-color: transparent;
    }
    .holdings-sort-btn.active {
      background: var(--surface-active);
      color: var(--text-1);
      border-color: var(--border-medium);
    }

    /* ── Mobile holdings card list ── */
    .holdings-cards-mobile {
      padding: 8px var(--content-px) 0 !important;
    }
    .holdings-cards-mobile .txn-list-row:first-child {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
    .holdings-cards-mobile .txn-list-row:last-child {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      border-bottom: none;
    }
    /* ── Trades Controls Bar ── */
    .trades-controls {
      z-index: 101;
      padding: 4px var(--content-px) 8px;
      display: flex;
      flex-direction: column;
    }
    .trades-secondary-row {
      display: flex;
      align-items: center;
    }
    .trades-secondary-row .type-nav {
      flex: 1;
      width: auto;
    }
    .trades-search-wrap {
      margin-left: 0 !important;
      padding: 0 0 4px;
    }
    .trades-search-wrap .txn-search {
      width: 100%;
      box-sizing: border-box;
    }

    .trades-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px var(--content-px) 0;
    }
    .trade-date-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 12px 0 4px;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
    }
    .trade-date-count {
      font-size: 10px;
      font-weight: 400;
      color: var(--text-3);
      font-family: var(--font-mono);
    }

    .holdings-table {
      width: 100%;
      min-width: 700px;
      border-collapse: collapse;
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-mono);
    }

    .holdings-table thead {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .holdings-table th {
      background: var(--table-head-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--text-3);
      font-size: 9px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: var(--ls-spread);
      padding: 10px 16px;
      text-align: right;
      white-space: nowrap;
      border-bottom: 1px solid var(--divider);
      cursor: pointer;
      user-select: none;
      transition: color var(--duration-normal), background var(--duration-slow) ease;
    }

    .holdings-table th:first-child {
      text-align: left;
      padding-left: 20px;
    }

    .holdings-table th:hover { color: var(--text-1); }

    .holdings-table th.sorted-asc::after { content: ' \25B2'; font-size: 9px; }
    .holdings-table th.sorted-desc::after { content: ' \25BC'; font-size: 9px; }

    .holdings-table td {
      padding: 12px 16px;
      font-weight: 400;
      text-align: right;
      white-space: nowrap;
      border-bottom: 1px solid var(--divider);
      color: var(--text-1);
      transition: color var(--duration-slow) ease, border-color var(--duration-slow) ease;
    }

    .holdings-table td:first-child {
      text-align: left;
      padding-left: 20px;
      font-weight: 400;
      font-family: var(--font-sans);
    }

    .holdings-table tr:hover td { background: var(--hover-bg); }

    .holdings-table .tbl-positive { color: var(--emerald); }
    .holdings-table .tbl-negative { color: var(--red); }

    .holdings-table tfoot td {
      font-weight: 400;
      background: var(--table-head-bg);
      border-top: 1px solid var(--divider);
      padding: 12px 16px;
      transition: background var(--duration-slow) ease;
    }

    .trade-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 400;
      font-family: var(--font-mono);
      padding: 4px 10px;
      border-radius: 10px;
      letter-spacing: var(--ls-caps);
    }

    .trade-badge.buy {
      background: rgba(74,222,128,0.1);
      color: var(--emerald);
    }

    .trade-badge.sell {
      background: rgba(248,113,113,0.1);
      color: var(--red);
    }

    /* ── Transaction List (All Txns redesign) ── */
    .txn-list-container {
      padding: 16px var(--content-px) 0;
    }
    .fab-stack {
      position: fixed;
      bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 90;
    }
    @media (min-width: 768px) {
      .fab-stack {
        bottom: 32px;
        right: clamp(24px, 4vw, 48px);
      }
    }
    .fab-add-txn {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(30,30,30,0.6);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      color: var(--emerald);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      cursor: pointer;
      transition: transform var(--duration-normal) var(--ease-out);
      -webkit-tap-highlight-color: transparent;
    }
    .fab-add-txn:active {
      transform: scale(0.9);
    }
    .fab-sell {
      color: var(--red);
    }
    [data-theme="light"] .fab-add-txn {
      background: rgba(255,255,255,0.6);
      border-color: rgba(0,0,0,0.06);
      box-shadow: var(--shadow-lg);
      color: #22863a;
    }
    [data-theme="light"] .fab-sell {
      color: #d63031;
    }
    .txn-date-group {
      margin-bottom: 8px;
    }
    .txn-date-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 12px 16px 6px;
    }
    .txn-date-label {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
      letter-spacing: var(--ls-tight);
    }
    .txn-date-total {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-3);
      font-weight: 400;
    }
    .txn-date-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: none;
      border-radius: 0;
      overflow: visible;
      box-shadow: none;
    }
    [data-theme="light"] .txn-date-items {
      box-shadow: none;
    }
    .txn-list-row {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      cursor: pointer;
      transition: background var(--duration-fast) ease;
      gap: 12px;
      background: var(--card-bg-solid);
      border-radius: 16px;
      border: 1px solid var(--glass-border);
    }
    .txn-list-row:hover {
      background: var(--card-bg-solid-hover);
    }
    [data-theme="light"] .txn-list-row:hover {
      background: var(--card-bg-solid-hover);
    }
    .txn-list-row:not(:last-child) {
      border-bottom: none;
    }
    [data-theme="light"] .txn-list-row:not(:last-child) {
      border-bottom: 1px solid var(--row-border);
    }
    .txn-list-dot {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .txn-list-dot svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    .txn-list-info {
      flex: 1;
      min-width: 0;
    }
    .txn-list-category {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .txn-list-desc {
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }
    .txn-list-amount {
      font-family: var(--font-mono);
      font-size: 14px;
      text-align: right;
      flex-shrink: 0;
      letter-spacing: var(--ls-tight);
    }
    .txn-list-amount.large {
      font-weight: 400;
    }
    .txn-list-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-3);
      font-size: 14px;
    }
    .txn-search-wrap {
      position: relative;
      margin-left: auto;
    }
    .txn-search {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 12px 12px 12px 36px;
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--text-1);
      width: 160px;
      outline: none;
      transition: border-color var(--duration-normal) ease, width var(--duration-slow) var(--ease-out);
    }
    .txn-search:focus {
      border-color: rgba(255,255,255,0.15);
      width: 220px;
    }

    /* ── Mobile: All Txns filter redesign ── */
    @media (max-width: 767px) {
      body.txn-list-active .txn-filters {
        flex-wrap: wrap;
        gap: 8px;
      }
      body.txn-list-active #dateNav {
        order: 1;
      }
      body.txn-list-active #filterTxnType {
        order: 2;
      }
      body.txn-list-active #filterTxnSearch {
        flex: 1 1 100% !important;
        order: 3;
        margin-left: 0 !important;
        display: flex !important;
      }
      body.txn-list-active #filterTxnSearch .txn-search {
        width: 100%;
      }
      body.txn-list-active #filterYear {
        flex: 1 1 calc(50% - 4px) !important;
        display: none !important;
        order: 10;
      }
      body.txn-list-active #filterPeriod {
        flex: 1 1 calc(50% - 4px) !important;
        display: none !important;
        order: 11;
      }
      body.txn-list-active #filterTxnCal {
        flex: 1 1 calc(50% - 4px) !important;
        display: none !important;
        order: 3;
      }
      body.txn-list-active #filterTxnType {
        flex: 1 1 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        order: 2;
      }
      body.txn-list-active .txn-cal-btn {
        width: 100%;
        justify-content: center;
      }
      /* Breakdown: wrap all 5 filters into 2 rows on mobile */
      body.txn-bd-active .txn-filters {
        flex-wrap: wrap;
        gap: 6px;
      }
      body.txn-bd-active #filterYear {
        flex: 1 1 calc(50% - 3px) !important;
        display: block !important;
        order: 1;
      }
      body.txn-bd-active #filterPeriod {
        flex: 1 1 calc(50% - 3px) !important;
        display: block !important;
        order: 2;
      }
      body.txn-bd-active #filterView {
        flex: 1 1 calc(33.33% - 4px) !important;
        display: block !important;
        order: 3;
      }
      body.txn-bd-active #filterDetail {
        flex: 1 1 calc(33.33% - 4px) !important;
        display: block !important;
        order: 4;
      }
      body.txn-bd-active #filterBdType {
        flex: 1 1 calc(33.33% - 4px) !important;
        display: block !important;
        order: 5;
      }

      /* Portfolio Trades: wrap 4 filters into 2x2 grid on mobile */
      body.port-trades-active #headerFilterRow {
        flex-wrap: wrap;
        gap: 8px;
      }
      body.port-trades-active #filterPortYear {
        flex: 1 1 calc(50% - 4px) !important;
        order: 1;
      }
      body.port-trades-active #filterPortPeriod {
        flex: 1 1 calc(50% - 4px) !important;
        order: 2;
      }
      body.port-trades-active #tradeFilterWrap {
        flex: 1 1 calc(50% - 4px) !important;
        order: 3;
      }
      body.port-trades-active #portTypeWrap {
        flex: 1 1 calc(50% - 4px) !important;
        order: 4;
      }

      /* Filter badge dot */
      .txn-filter-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 6px;
        height: 6px;
        border-radius: 4px;
        background: var(--emerald);
        display: none;
      }
      .txn-filter-badge.active {
        display: block;
      }
    }
    [data-theme="light"] .txn-search {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .txn-search:focus {
      border-color: rgba(0,0,0,0.15);
    }
    .txn-search::placeholder {
      color: var(--text-3);
    }
    .txn-search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 13px;
      height: 13px;
      color: var(--text-3);
      pointer-events: none;
    }

    /* ── Calendar Popup ── */
    .txn-cal-wrap {
      position: relative;
      overflow: visible !important;
    }
    .txn-cal-btn {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      width: 100%;
      gap: 6px;
      color: var(--text-2);
      font-family: var(--font-sans);
      font-size: 12px;
      transition: border-color var(--duration-normal) ease, color var(--duration-normal) ease;
    }
    .txn-cal-btn:hover { color: var(--text-1); border-color: rgba(255,255,255,0.15); }
    [data-theme="light"] .txn-cal-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
    [data-theme="light"] .txn-cal-btn:hover { border-color: rgba(0,0,0,0.15); }
    .txn-cal-btn svg { width: 14px; height: 14px; }
    .txn-cal-btn.has-date { color: var(--emerald); border-color: var(--emerald); }
    /* Calendar Quick Picks */
    .cal-quick-section {
      padding: 0 0 8px;
    }
    .cal-quick-label {
      font-size: 9px;
      font-weight: 400;
      letter-spacing: var(--ls-wide);
      color: var(--text-3);
      text-transform: uppercase;
      padding: 0 12px;
      margin-bottom: 6px;
    }
    .cal-quick-row {
      display: flex;
      gap: 4px;
      padding: 0 8px;
      flex-wrap: wrap;
    }
    .cal-quick-btn {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 400;
      color: var(--text-2);
      cursor: pointer;
      transition: all var(--duration-normal) ease;
      font-family: var(--font-sans);
      flex: 1;
      text-align: center;
      min-width: 0;
    }
    .cal-quick-btn:hover {
      background: rgba(255,255,255,0.08);
      color: var(--text-1);
    }
    .cal-quick-btn.active {
      background: rgba(48,209,88,0.15);
      border-color: rgba(48,209,88,0.3);
      color: var(--emerald);
    }
    .cal-quick-year {
      flex: 0 0 auto;
      padding: 6px 12px;
    }
    [data-theme="light"] .cal-quick-btn {
      background: rgba(0,0,0,0.03);
      border-color: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .cal-quick-btn:hover {
      background: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .cal-quick-btn.active {
      background: rgba(34,134,58,0.1);
      border-color: rgba(34,134,58,0.25);
      color: var(--emerald);
    }
    .cal-divider {
      height: 1px;
      background: var(--glass-border);
      margin: 4px 12px 8px;
    }
    @media (max-width: 767px) {
      .txn-cal-popup {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        width: calc(100vw - var(--content-px) * 2 - 2px) !important;
        max-height: 60vh;
        overflow-y: auto;
      }
    }

    .txn-cal-popup {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 300px;
      background: var(--card-bg-solid);
      border-radius: 16px;
      box-shadow: var(--shadow-card), 0 16px 32px rgba(0,0,0,0.25);
      border: 1px solid var(--glass-border);
      z-index: 200;
      padding: 12px;
      opacity: 0;
      transform: translateY(-12px) scale(0.9);
      transform-origin: top left;
      pointer-events: none;
      transition: opacity var(--duration-slow) ease, transform var(--duration-slow) var(--ease-spring);
    }
    .txn-cal-popup.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    [data-theme="light"] .txn-cal-popup {
      box-shadow: var(--shadow-lg);
    }
    .txn-cal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .txn-cal-nav-btn {
      background: none;
      border: none;
      color: var(--text-2);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 16px;
      line-height: var(--lh-none);
      transition: color var(--duration-fast), background var(--duration-fast);
    }
    .txn-cal-nav-btn:hover { color: var(--text-1); background: rgba(255,255,255,0.06); }
    [data-theme="light"] .txn-cal-nav-btn:hover { background: rgba(0,0,0,0.04); }
    .txn-cal-month-label {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
    }
    .txn-cal-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0;
      margin-bottom: 4px;
    }
    .txn-cal-weekday {
      text-align: center;
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 400;
      color: var(--text-3);
      padding: 4px 0;
      text-transform: uppercase;
      letter-spacing: var(--ls-slight);
    }
    .txn-cal-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .txn-cal-day {
      position: relative;
      text-align: center;
      padding: 6px 0;
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 400;
      color: var(--text-2);
      border-radius: 10px;
      cursor: pointer;
      transition: background var(--duration-fast), color var(--duration-fast);
    }
    .txn-cal-day:hover { background: rgba(255,255,255,0.06); color: var(--text-1); }
    [data-theme="light"] .txn-cal-day:hover { background: rgba(0,0,0,0.04); }
    .txn-cal-day.empty { pointer-events: none; }
    .txn-cal-day.today {
      color: var(--text-1);
      font-weight: 400;
      box-shadow: inset 0 0 0 1.5px var(--text-3);
    }
    .txn-cal-day.selected {
      background: var(--emerald) !important;
      color: #fff !important;
      font-weight: 400;
    }
    .txn-cal-day.has-txn::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--emerald);
    }
    .txn-cal-day.selected.has-txn::after { background: rgba(255,255,255,0.6); }
    .txn-cal-day.other-month { color: var(--text-3); opacity: 0.4; }
    .txn-cal-clear {
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 6px;
      background: rgba(255,255,255,0.04);
      border: none;
      border-radius: 10px;
      color: var(--text-2);
      font-family: var(--font-sans);
      font-size: 12px;
      cursor: pointer;
      transition: color var(--duration-fast), background var(--duration-fast);
    }
    .txn-cal-clear:hover { color: var(--text-1); background: rgba(255,255,255,0.08); }
    [data-theme="light"] .txn-cal-clear { background: rgba(0,0,0,0.03); }
    [data-theme="light"] .txn-cal-clear:hover { background: rgba(0,0,0,0.06); }

    /* ── Allocation ── */
    .allocation-list { padding: 8px 20px; position: relative; z-index: 10; }

    .alloc-item { margin-bottom: 16px; animation: fadeUp 0.4s ease both; }

    .alloc-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 400;
      color: var(--text-1);
      transition: color var(--duration-slow) ease;
    }

    .alloc-header span:last-child {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-2);
    }

    .alloc-bar-bg {
      height: 6px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 4px;
      overflow: hidden;
      transition: background var(--duration-slow) ease;
    }

    .alloc-bar {
      height: 100%;
      border-radius: 4px;
      transition: width var(--duration-enter) ease;
    }