/* ═══════════════════════════════════════════════════════════
   PORTFOLIO SCREEN — Premium glass card rows
   Swipe actions sit INSIDE the card boundary
   ═══════════════════════════════════════════════════════════ */

.portfolio-value-section {
  padding: 16px 0 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;
  z-index: 0;
}
/* Ambient aurora behind the hero number — the same brand violet/blue the
   news screen borrows from the orb halo. Sits in its own stacking context
   so it can never paint over the odometer digits. */
.portfolio-value-section::before {
  content: '';
  position: absolute;
  left: 50%; top: 44%;
  width: 320px; height: 170px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(141, 159, 255, 0.14), transparent 72%),
    radial-gradient(closest-side at 36% 62%, rgba(188, 130, 243, 0.09), transparent 74%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
.portfolio-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); letter-spacing: -0.2px; margin-bottom: 12px; }
.portfolio-value {
  font-size: 56px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-feature-settings: "tnum" on, "lnum" on;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 12px;
  transition: font-size var(--motion-normal) var(--ease);
}
.portfolio-value.long { font-size: 42px; }
.portfolio-value.very-long { font-size: 32px; }
.portfolio-value.ultra-long { font-size: 24px; }
.portfolio-change {
  font-size: 13px; font-weight: 500; padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  display: inline-block; white-space: nowrap;
}

/* ── Market Indices Bar ── */
/* Full-bleed wrapper so the marquee runs edge-to-edge inside the padded screen */
.market-indices-wrap {
  position: relative;
  width: calc(100% + var(--page-px) * 2);
  margin: 4px calc(var(--page-px) * -1) 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  padding: 6px 0;
}
.market-indices-bar {
  display: flex; gap: 8px;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
  will-change: transform;
}
.market-indices-bar.paused { animation-play-state: paused; }
@keyframes marqueeScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.market-indices-bar::-webkit-scrollbar { display: none; }
.index-chip {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06);
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  min-height: 28px;
  padding: 5px 10px; border-radius: var(--radius-pill); cursor: pointer;
  white-space: nowrap;
  transition: transform var(--motion-fast, 0.18s) var(--ease), background var(--motion-normal, 0.26s) var(--ease);
}
.index-chip:active { transform: scale(0.96); background: rgba(255,255,255,0.05); }
.index-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.index-change { font-size: 11px; font-weight: 600; }

/* ── Portfolio Blocks ── */
.portfolio-layout-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 8px;
}
/* Non-editing: a small icon that lives at the very bottom of the scrollable
   portfolio content. NOT sticky — the user only sees it after scrolling past
   their data, like the "Edit" link at the bottom of an iOS list. */
.portfolio-layout-toolbar-bottom {
  display: flex;
  justify-content: center;
  margin: 32px 0 calc(var(--safe-bottom, 0px) + 96px);
}
/* Editing: a separate toolbar mounted on document.body via JS (not inside
   the screen, which has a transformed ancestor that traps position:fixed).
   This sits 86px above the safe-area, just above the tab bar. */
.portfolio-layout-toolbar-floating {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom, 0px) + 86px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 110;
  pointer-events: none;
  animation: floatToolbarIn 0.32s cubic-bezier(0.2, 0, 0.2, 1) both;
}
.portfolio-layout-toolbar-floating > * { pointer-events: auto; }
@keyframes floatToolbarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.portfolio-layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(20,20,22,0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  color: var(--text-secondary);
  font: 600 12px/1 var(--font);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), inset 0 0.5px 0 rgba(255,255,255,0.08);
  transition: transform var(--motion-fast, 0.18s) var(--ease), background var(--motion-normal, 0.26s) var(--ease);
}
.portfolio-layout-btn:active { transform: scale(0.94); background: rgba(255,255,255,0.07); }
.portfolio-layout-btn.active {
  color: var(--text);
  border-color: rgba(141,159,255,0.32);
  background: rgba(141,159,255,0.18);
}
/* The "Edit Layout" CTA at the bottom of the portfolio. Visible at full
   opacity with a label so the affordance is clear, but lives at the very
   end of the scroll so it stays out of the way until the user reaches it. */
.portfolio-layout-btn-edit-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 0.5px 0 rgba(255,255,255,0.10);
  opacity: 1;
}
.portfolio-layout-btn-edit-cta:active {
  transform: scale(0.96);
  background: rgba(255,255,255,0.10);
}
.portfolio-layout-btn-edit-cta svg { display: block; opacity: 0.85; }
.portfolio-block {
  position: relative;
  /* Smooth ramp into edit mode: scale-down, border, and shadow all settle
     over ~360ms together for the "zoom out into edit" feel. */
  transition: transform 0.36s cubic-bezier(0.2, 0, 0.2, 1),
              border-color 0.42s var(--ease),
              background 0.42s var(--ease),
              box-shadow 0.42s cubic-bezier(0.2, 0, 0.2, 1);
}
.portfolio-block.is-editing {
  margin: 14px 0;
  padding: 14px 12px 12px;
  border-radius: 22px;
  border: 1.5px dotted rgba(141,159,255,0.32);
  background: rgba(255,255,255,0.028);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 0.5px 0 rgba(255,255,255,0.06);
  touch-action: pan-y;
  overflow: hidden;
  transform: scale(0.94);
  transform-origin: 50% 50%;
}
.portfolio-block.is-editing .portfolio-block-body {
  pointer-events: none;
}
/* Springboard wiggle. Critical: rotate-only on the INNER body so the outer
   block's transform (scale + FLIP translateY) never collides with the
   wiggle. Without this separation, FLIP would briefly suspend the wiggle
   on the moving block and produce the "freeze and pop" feel. */
@keyframes blockWiggleA {
  0%, 100% { transform: rotate(-0.5deg); }
  50%      { transform: rotate(0.55deg); }
}
@keyframes blockWiggleB {
  0%, 100% { transform: rotate(0.5deg); }
  50%      { transform: rotate(-0.6deg); }
}
.portfolio-block.is-editing:not(.is-dragging):not(.is-snapping) > .portfolio-block-body {
  animation: blockWiggleA 0.34s ease-in-out 0.36s infinite alternate;
  transform-origin: 50% 50%;
}
.portfolio-block.is-editing:not(.is-dragging):not(.is-snapping):nth-child(2n) > .portfolio-block-body {
  animation-name: blockWiggleB;
  animation-duration: 0.38s;
}
.portfolio-block.is-editing:not(.is-dragging):not(.is-snapping):nth-child(3n) > .portfolio-block-body {
  animation-duration: 0.36s;
  animation-delay: 0.32s;
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-block.is-editing > .portfolio-block-body { animation: none !important; }
}
/* In editing mode the block has its own padding + overflow:hidden, so the
   markets bar must not bleed past the block's inner box (was clipping the
   right-most chip). Constrain to the body width and tighten the fade mask. */
.portfolio-block.is-editing .market-indices-wrap {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.portfolio-block.is-snapping {
  pointer-events: none;
}
.portfolio-block.is-dragging {
  z-index: 20;
  border-color: rgba(141,159,255,0.42);
  background: rgba(141,159,255,0.06);
  box-shadow: 0 24px 56px rgba(0,0,0,0.38), 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(141,159,255,0.18);
  opacity: 0.97;
  pointer-events: none;
}
/* Edit-mode remove (X) button — sits in the top-left corner of optional
   blocks Springboard-style. Required blocks render no chrome at all. */
.portfolio-block-remove,
.portfolio-block-add-btn {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
}
.portfolio-block-remove:active,
.portfolio-block-add-btn:active { transform: scale(0.88); background: rgba(255,255,255,0.09); }
.portfolio-block-remove {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  z-index: 5;
  color: #fff;
  background: var(--loss);
  border-color: var(--loss);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.portfolio-layout-dragging {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Lock the actual scroll container too. Without this, touchstart that began
   before drag activated can still drive native scroll concurrently. */
.portfolio-layout-scroll-locked {
  touch-action: none;
}
/* Override the scroll-focus gallery effect inside any editing block. Its
   --focus-ratio CSS var only updates on scroll, not on FLIP — so after a
   block reorders, its inner items stay frozen at their old dim/blurred
   state. Force them back to full focus while editing. */
.portfolio-block.is-editing .scroll-focus-item,
.portfolio-block.is-dragging .scroll-focus-item,
.portfolio-block.is-snapping .scroll-focus-item {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.portfolio-block.is-editing .scroll-focus-item::after,
.portfolio-block.is-dragging .scroll-focus-item::after,
.portfolio-block.is-snapping .scroll-focus-item::after {
  display: none !important;
}
.portfolio-block-placeholder {
  margin: 14px 0;
  border-radius: 22px;
  border: 1.5px dotted rgba(141,159,255,0.42);
  background: rgba(141,159,255,0.055);
  box-shadow: inset 0 0 0 1px rgba(141,159,255,0.08);
  transition: height 0.18s var(--ease), margin 0.18s var(--ease);
}
.portfolio-block-add-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 18px;
}
.portfolio-block-add-btn {
  width: 44px;
  height: 44px;
  color: var(--text);
  border-color: rgba(141,159,255,0.18);
  background: rgba(141,159,255,0.08);
}

.portfolio-candle-card {
  padding: 14px 16px 16px;
  border-radius: var(--radius-16);
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.28),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.portfolio-candle-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.portfolio-candle-symbol { font-size: 15px; font-weight: 700; color: var(--text); }
.portfolio-candle-change { font-size: 12px; font-weight: 700; }
.portfolio-candle-grid {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 4px 2px;
}
.portfolio-candle {
  width: 8px;
  min-height: 20px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(52,199,89,0.95), rgba(52,199,89,0.22));
  box-shadow: 0 0 16px rgba(52,199,89,0.12);
}
.portfolio-candle.down {
  background: linear-gradient(180deg, rgba(255,69,58,0.9), rgba(255,69,58,0.22));
  box-shadow: 0 0 16px rgba(255,69,58,0.10);
}

.portfolio-mini-news {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portfolio-mini-news-row,
.portfolio-mini-news-item {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,0.065);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-14);
}
.portfolio-mini-news-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}
.portfolio-mini-news-row span,
.portfolio-mini-news-row i {
  display: block;
  height: 11px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
}
.portfolio-mini-news-row span { width: 62%; }
.portfolio-mini-news-row i { width: 18%; }
.portfolio-mini-news-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  color: var(--text);
  text-align: left;
  font-family: var(--font);
}
.portfolio-mini-news-item span {
  max-width: 100%;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portfolio-mini-news-item i,
.portfolio-mini-news-empty {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
}
.portfolio-mini-news-empty {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-14);
  background: rgba(255,255,255,0.025);
}

/* ── Lists ── */
.holdings-list, .watchlist-list { display: flex; flex-direction: column; gap: 10px; }

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

/* portfolio.js toggles .portfolio-entering only for first data population. */
.screen.portfolio-entering .holdings-list .swipe-container,
.screen.portfolio-entering .watchlist-list .swipe-container {
  animation: rowFadeIn 0.28s var(--ease) both;
  will-change: opacity, transform;
}

.screen.portfolio-entering .holdings-list .swipe-container:nth-child(1) { animation-delay: 0ms; }
.screen.portfolio-entering .holdings-list .swipe-container:nth-child(2) { animation-delay: 35ms; }
.screen.portfolio-entering .holdings-list .swipe-container:nth-child(3) { animation-delay: 70ms; }
.screen.portfolio-entering .holdings-list .swipe-container:nth-child(4) { animation-delay: 105ms; }
.screen.portfolio-entering .holdings-list .swipe-container:nth-child(5) { animation-delay: 140ms; }
.screen.portfolio-entering .holdings-list .swipe-container:nth-child(6) { animation-delay: 175ms; }
.screen.portfolio-entering .holdings-list .swipe-container:nth-child(7) { animation-delay: 210ms; }
.screen.portfolio-entering .watchlist-list .swipe-container:nth-child(1) { animation-delay: 0ms; }
.screen.portfolio-entering .watchlist-list .swipe-container:nth-child(2) { animation-delay: 35ms; }
.screen.portfolio-entering .watchlist-list .swipe-container:nth-child(3) { animation-delay: 70ms; }
.screen.portfolio-entering .watchlist-list .swipe-container:nth-child(4) { animation-delay: 105ms; }
.screen.portfolio-entering .watchlist-list .swipe-container:nth-child(5) { animation-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {
  .screen.portfolio-entering .holdings-list .swipe-container,
  .screen.portfolio-entering .watchlist-list .swipe-container {
    animation: none;
  }
}

/* ── Swipe Container — IS the card ── */
.swipe-container {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-16);
  overflow: hidden;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.32),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.07);
}

/* ── Holding Row — OPAQUE so it covers swipe actions beneath ──
   Vertical sheen gradient instead of a flat slab: same news-card lustre
   language, but fully opaque because it must occlude the swipe buttons. */
.holding-row {
  background: linear-gradient(180deg, #191b22 0%, #121317 58%, #0f1013 100%);
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 20px;
  position: relative; z-index: 2; width: 100%;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), transform var(--motion-normal) var(--ease);
}

.holding-row:active:not(.swiping) {
  background: linear-gradient(180deg, #1e2029 0%, #15161b 58%, #111216 100%);
  transform: scale(0.99);
}

.holding-row.swiping {
  transition: background var(--motion-fast) var(--ease);
}

.holding-left { display: flex; flex-direction: column; gap: 4px; }
.holding-ticker { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.3px; }
.holding-shares { font-size: 13px; color: var(--text-tertiary); }
.holding-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.holding-price { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.holding-change { font-size: 13px; font-weight: 500; }
.holding-change--toggle {
  padding: 3px 8px;
  margin-right: -2px;
  border-radius: var(--radius-6);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease);
}
.holding-change--toggle:active { transform: scale(0.95); }
[data-theme="light"] .holding-change--toggle { background: rgba(0,0,0,0.05); }

/* ── Swipe Actions — Always visible, revealed by row sliding over them ──
   iOS systemRed dark = #FF453A, systemGray5 dark = #2C2C2E */
.swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  z-index: 1;
  width: 150px;
  gap: 0;
  pointer-events: none;
}

.swipe-action-btn {
  flex: 1;
  border: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: filter var(--motion-fast) var(--ease);
}

.swipe-action-btn:active { filter: brightness(0.85); }

/* Edit — iOS systemGray5 dark */
.swipe-action-btn.edit {
  background: #2C2C2E;
  color: #fff;
}

/* Remove — iOS systemRed dark */
.swipe-action-btn.danger {
  background: #FF453A;
  color: #fff;
}

/* ── Skeleton Loaders ── */
.skeleton-row {
  background: rgba(255, 255, 255, 0.02);
  padding: 20px; border-radius: var(--radius-16);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 10px; width: 100%; position: relative; overflow: hidden;
}
.skeleton-row::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.45s var(--ease) infinite;
}
.skel-block { height: 16px; background: var(--surface-elevated); border-radius: var(--radius-6); margin-bottom: 6px; }
.skel-sm { width: 60px; height: 12px; }
.skel-md { width: 100px; }
.skel-lg { width: 140px; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ── Drag over ── */
.swipe-container.drag-over {
  border-color: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════════════════════
   SHEET COMMON — Reusable bottom sheet content patterns
   ═══════════════════════════════════════════════════════════ */

.sheet-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0 24px;
}
.sheet-header { display: flex; flex-direction: column; gap: 4px; }
.sheet-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.sheet-subtitle { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════
   TRANSACTION FORM — Apple-like redesign
   ═══════════════════════════════════════════════════════════ */

.txn-type-toggle {
  display: flex;
  position: relative;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-pill);
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.txn-type-slider {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 1px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.28s var(--ease);
  z-index: 0;
}
.txn-type-btn {
  flex: 1;
  padding: 11px 0;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: color var(--motion-normal) var(--ease);
  background: transparent;
  color: rgba(255,255,255,0.3);
  position: relative;
  z-index: 1;
}
.txn-type-btn.active[data-type="BUY"] { color: var(--gain); }
.txn-type-btn.active[data-type="SELL"] { color: var(--loss); }
.txn-type-btn:active { opacity: 0.7; }

.txn-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Suppress number input spinners */
.txn-field input[type=number]::-webkit-inner-spin-button,
.txn-field input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.txn-field input[type=number] { -moz-appearance: textfield; }

/* Date input — hide native browser icon, we render our own */
.txn-field input[type=date] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.txn-field input[type=date]::-webkit-calendar-picker-indicator {
  /* Invisible but still interactive — our custom icon sits on top */
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
input[type=date]::-webkit-inner-spin-button { display: none; }

/* Date field wrapper — positions the custom calendar icon */
.txn-date-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.txn-date-wrap input[type=date] {
  flex: 1;
  padding-right: 24px; /* room for icon */
}
.txn-date-icon {
  position: absolute;
  right: 0;
  color: rgba(255,255,255,0.2);
  pointer-events: none; /* click falls through to the invisible native indicator */
  display: flex;
  align-items: center;
}

.txn-input-group {
  display: flex;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-14);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.2);
}
.txn-input-group .txn-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}
.txn-field-divider {
  width: 1px;
  background: rgba(255,255,255,0.07);
  align-self: stretch;
  margin: 13px 0;
}
.txn-field label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.txn-field input {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
  outline: none;
  width: 100%;
  color-scheme: dark;
  /* 17px mono × 1.2 = 20.4px fractional line box; the contract token is
     an integer (caret centering on WKWebView). */
  line-height: var(--input-line-height);
}
.txn-field input::placeholder {
  color: rgba(255,255,255,0.12);
}
.txn-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.txn-currency {
  font-size: 17px;
  font-family: var(--mono);
  font-weight: 500;
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
}

.txn-total-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.2);
  padding: 14px 16px;
  border-radius: var(--radius-14);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.txn-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.txn-total-label {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: -0.1px;
}
.txn-total-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
.txn-error {
  font-size: 12px;
  color: var(--loss);
  font-weight: 600;
  text-align: right;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-normal) var(--ease), margin var(--motion-normal) var(--ease);
}
.txn-error.visible {
  max-height: 20px;
  margin-top: 6px;
}

/* Actions — stacked, Apple settings-style */
.txn-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
}
.txn-primary-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  color: #000;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.txn-primary-btn:active { transform: scale(0.98); opacity: 0.85; }
.txn-primary-btn.shake {
  animation: txnShake 0.4s ease;
}
@keyframes txnShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Danger — iOS-style destructive text button, no fill */
.txn-danger-btn {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: #FF3B30;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease);
  text-align: center;
}
.txn-danger-btn:active { opacity: 0.5; }
.txn-danger-btn.confirming {
  font-weight: 700;
  color: #FF3B30;
}

/* ── Ask AI Row — glassy pill button below the action buttons ── */
.txn-ai-row {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.txn-ask-ai-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  /* Frosted glass base */
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 16px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}

/* Shine highlight — left-to-right gradient overlay */
.txn-ai-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 60%
  );
  pointer-events: none;
}

.txn-ask-ai-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 8px rgba(0, 0, 0, 0.18);
}


/* ── Transaction History (in sheet) ── */
.txn-history-section {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.txn-history-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.txn-history-list { display: flex; flex-direction: column; }
.txn-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
  border-radius: var(--radius-6);
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.txn-history-row:active { background: rgba(255,255,255,0.04); }
.txn-history-row:last-child { border-bottom: none; }
.txn-history-left { display: flex; align-items: center; gap: 8px; }
.txn-history-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.txn-history-badge.buy { background: rgba(52, 199, 89, 0.12); color: var(--gain); }
.txn-history-badge.sell { background: rgba(255, 59, 48, 0.12); color: var(--loss); }
.txn-history-info { font-size: 13px; color: var(--text-secondary); }
.txn-history-date { font-size: 12px; color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO ACTIONS — Add / Link Brokerage bar
   ═══════════════════════════════════════════════════════════ */

.portfolio-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.portfolio-action-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
}
.portfolio-action-chip:active {
  transform: scale(0.96);
  background: rgba(255,255,255,0.08);
}
/* Filled primary: the one action on the bar that must never read as text.
   The doubled-class [data-theme] selectors outrank the light overrides below. */
.portfolio-action-chip--primary,
[data-theme] .portfolio-action-chip.portfolio-action-chip--primary {
  background: var(--text);
  border-color: transparent;
  box-shadow: none;
  color: var(--bg);
  font-weight: 600;
}
.portfolio-action-chip--primary:active,
[data-theme] .portfolio-action-chip.portfolio-action-chip--primary:active {
  background: var(--text);
  opacity: 0.85;
}
.portfolio-action-chip--orb {
  padding: 6px;
  width: 34px;
  height: 34px;
  justify-content: center;
  gap: 0;
  background: rgba(141, 159, 255, 0.06);
  border-color: rgba(141, 159, 255, 0.18);
}
.portfolio-action-chip--orb:active {
  background: rgba(141, 159, 255, 0.12);
}

/* ── Portfolio Layout Sheet ── */
.layout-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 24px;
}
.layout-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layout-sheet-row {
  display: grid;
  grid-template-columns: 24px 1fr 38px 38px 38px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-16);
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
}
.layout-sheet-grip {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-sheet-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  min-width: 0;
}
.layout-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.075);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.layout-icon-btn:disabled {
  opacity: 0.28;
}
.layout-icon-btn:not(:disabled):active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.08);
}
.layout-remove-btn { color: var(--loss); }
.layout-lock-dot {
  width: 6px;
  height: 6px;
  justify-self: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.layout-add-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.layout-add-btn,
.layout-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font: 650 13px/1 var(--font);
}
.layout-reset-btn {
  width: 100%;
  color: var(--text-tertiary);
}

/* ── Empty Holdings State ── */
.empty-holdings {
  padding: 40px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-holdings-icon { margin-bottom: 4px; }
.empty-holdings-text { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.empty-holdings-sub { font-size: 13px; color: var(--text-tertiary); max-width: 240px; }
.empty-holdings-actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.empty-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  width: 100%;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
  border: none;
}
.empty-action-btn.primary {
  background: #fff;
  color: #000;
}
.empty-action-btn.secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.08);
}
.empty-action-btn:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════════════════════
   ADD HOLDING SEARCH — Inline search in bottom sheet
   ═══════════════════════════════════════════════════════════ */

/* Sticky header + search row inside the bottom sheet. When the keyboard
   opens on iOS, the sheet gets capped to visualViewport.height, and the
   search input stays pinned to the top of the sheet while results scroll
   beneath it — so the user can always see the first few matches. */
.add-holding-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass-bg, rgba(10, 16, 20, 0.95));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding-bottom: 12px;
  margin: 0 calc(var(--page-px, 28px) * -1) 0;
  padding-left: var(--page-px, 28px);
  padding-right: var(--page-px, 28px);
}
.add-holding-header {
  padding: 4px 0 10px;
}
.add-holding-header .sheet-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.add-holding-search {
  position: relative;
  display: flex;
  align-items: center;
}
.add-holding-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.add-holding-input {
  width: 100%;
  padding: 14px 14px 14px 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-12);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  transition: border-color var(--motion-normal) var(--ease);
  box-sizing: border-box;
}
.add-holding-input:focus {
  border-color: rgba(255,255,255,0.2);
}
.add-holding-input::placeholder { color: rgba(255,255,255,0.2); }
.add-holding-results { display: flex; flex-direction: column; }
.add-holding-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
  border-radius: var(--radius-8);
  margin: 0 -4px;
  padding-left: 8px;
  padding-right: 8px;
}
.add-holding-result:active { background: rgba(255,255,255,0.04); }
.add-holding-result:last-child { border-bottom: none; }
.add-holding-result-left { display: flex; flex-direction: column; gap: 2px; }
.add-holding-ticker { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.add-holding-name { font-size: 12px; color: var(--text-tertiary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-holding-empty { padding: 24px 0; text-align: center; color: var(--text-tertiary); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO SELECTOR — Redesigned
   ═══════════════════════════════════════════════════════════ */

.port-list { display: flex; flex-direction: column; gap: 6px; }
.port-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-12);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
}
.port-option:active { background: rgba(255,255,255,0.05); }
.port-option.active { border-color: var(--gain); }
.port-option-left { flex: 1; min-width: 0; }
.port-option-name { font-size: 15px; font-weight: 500; color: var(--text-secondary); }
.port-option.active .port-option-name { color: #fff; }
.port-option-actions { display: flex; align-items: center; gap: 6px; }
.port-check { color: var(--gain); font-size: 14px; }
.port-action-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-fast) var(--ease);
}
.port-action-btn:active { background: rgba(255,255,255,0.06); }
.port-delete-btn { color: var(--loss); opacity: 0.6; }
.port-delete-btn:active { opacity: 1; }
.port-delete-btn.confirming {
  opacity: 1;
  background: rgba(255, 59, 48, 0.12);
}
.port-delete-confirm-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.port-new-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.port-inline-input {
  flex: 1;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-10);
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.port-inline-input:focus { border-color: rgba(255,255,255,0.25); }
.port-inline-actions { display: flex; gap: 4px; }
.port-inline-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-fast) var(--ease);
}
.port-inline-btn.confirm { background: rgba(52, 199, 89, 0.15); color: var(--gain); }
.port-inline-btn.cancel { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }
.port-inline-btn:active { transform: scale(0.9); }

.port-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.1);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
}
.port-add-btn:active { background: rgba(255,255,255,0.08); transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════
   BROKERAGE LINKING — Premium connection UI
   ═══════════════════════════════════════════════════════════ */

.brokerage-info-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-14);
  align-items: flex-start;
}
.brokerage-info-text { flex: 1; }
.brokerage-info-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; }
.brokerage-info-desc { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }

.brokerage-list { display: flex; flex-direction: column; gap: 4px; }
.brokerage-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-12);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease);
}
.brokerage-option:active { background: rgba(255,255,255,0.05); transform: scale(0.98); }
.brokerage-option.selected {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
}
.brokerage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.brokerage-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  transition: color var(--motion-normal) var(--ease);
}
.brokerage-option.selected .brokerage-name { color: var(--text-tertiary); }
.brokerage-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-tertiary);
}
.brokerage-manual-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Brokerage CSV Upload ── */
.brokerage-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: var(--radius-14);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-normal) var(--ease);
  text-align: center;
}
.brokerage-upload-label:active {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
  transform: scale(0.98);
}

/* (Stale-day pill removed — the "as of yesterday / last Friday" suffix in
 * the portfolio-change line already disambiguates the chart axis.) */
#perf-chart-wrap { position: relative; }

/* ── Watchlist drag-to-reorder lift state ──────────────────────────────────
 * Touch-based long-press lift. The previous HTML5 drag-and-drop didn't fire
 * on iOS WKWebView at all, so this is the visible lift cue: glassy rise,
 * subtle scale, soft shadow, brighter border.
 */
.swipe-container.lifted {
  z-index: 50;
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.swipe-container.lifted .holding-row {
  background: rgba(20, 20, 24, 0.86);
}

/* ── Light mode overrides ── */
[data-theme="light"] .portfolio-change {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.07);
  box-shadow: none;
}
[data-theme="light"] .portfolio-value-section::before {
  opacity: 0.45;
}
[data-theme="light"] .swipe-container {
  box-shadow: 0 8px 20px rgba(0,0,0,0.07), inset 0 0.5px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .portfolio-candle-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
[data-theme="light"] .index-chip {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .index-chip:active {
  background: rgba(0,0,0,0.08);
}
[data-theme="light"] .holding-row:active:not(.swiping) {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .holding-row {
  background: var(--surface);
}
[data-theme="light"] .swipe-container {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .swipe-action-btn {
  background: rgba(0,0,0,0.06);
  color: var(--text-secondary);
}
[data-theme="light"] .swipe-action-btn.danger {
  background: rgba(229,57,53,0.12);
  color: #e53935;
}
[data-theme="light"] .section-title {
  color: var(--text-secondary);
}
[data-theme="light"] .portfolio-action-chip {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}

/* ── Light mode overrides ── */
[data-theme="light"] .portfolio-change {
  background: rgba(0,0,0,0.03);
  color: var(--text-secondary);
}
[data-theme="light"] .portfolio-change.gain {
  color: var(--gain);
}
[data-theme="light"] .portfolio-change.loss {
  color: var(--loss);
}
[data-theme="light"] .portfolio-change.neutral {
  color: var(--text-secondary);
}

[data-theme="light"] .skeleton-row {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .skeleton-row::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
}
[data-theme="light"] .skel-block {
  background: rgba(0,0,0,0.06);
}

[data-theme="light"] .portfolio-block.is-editing {
  border-color: rgba(98,113,220,0.34);
  background: rgba(255,255,255,0.30);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.72), 0 10px 28px rgba(78,84,120,0.055);
}
[data-theme="light"] .portfolio-block-placeholder {
  border-color: rgba(98,113,220,0.50);
  background: rgba(98,113,220,0.07);
  box-shadow: inset 0 0 0 1px rgba(98,113,220,0.08);
}
[data-theme="light"] .portfolio-block-add-btn {
  background: rgba(255,255,255,0.52);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .portfolio-layout-btn-edit-cta {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.08);
  color: rgba(20,22,30,0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10), inset 0 0.5px 0 rgba(255,255,255,1);
}

[data-theme="light"] .swipe-container.drag-over {
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .swipe-container.lifted {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow:
    0 16px 38px rgba(0,0,0,0.16),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
[data-theme="light"] .swipe-container.lifted .holding-row {
  background: rgba(255,255,255,0.94);
}

[data-theme="light"] .sheet-section {
  color: var(--text);
}
[data-theme="light"] .sheet-header {
  color: var(--text);
}
[data-theme="light"] .sheet-title {
  color: var(--text);
}
[data-theme="light"] .sheet-subtitle {
  color: var(--text-tertiary);
}

[data-theme="light"] .txn-type-toggle {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .txn-type-slider {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}
[data-theme="light"] .txn-type-btn {
  color: var(--text-tertiary);
}
[data-theme="light"] .txn-type-btn.active[data-type="BUY"] {
  color: var(--gain);
}
[data-theme="light"] .txn-type-btn.active[data-type="SELL"] {
  color: var(--loss);
}

[data-theme="light"] .txn-input-group,
[data-theme="light"] .txn-total-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .txn-field-divider {
  background: rgba(0,0,0,0.08);
}
[data-theme="light"] .txn-field label {
  color: var(--text-tertiary);
}
[data-theme="light"] .txn-field input,
[data-theme="light"] .date-input,
[data-theme="light"] .shares-input,
[data-theme="light"] .price-input {
  color: var(--text);
  color-scheme: light;
}
[data-theme="light"] .txn-field input::placeholder,
[data-theme="light"] .date-input::placeholder,
[data-theme="light"] .shares-input::placeholder,
[data-theme="light"] .price-input::placeholder {
  color: var(--text-tertiary);
}
[data-theme="light"] .txn-date-icon,
[data-theme="light"] .txn-currency {
  color: var(--text-tertiary);
}
[data-theme="light"] .txn-history-section {
  border-top-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .txn-history-row,
[data-theme="light"] .txn-row {
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .txn-history-row:active,
[data-theme="light"] .txn-row:active {
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .txn-history-badge,
[data-theme="light"] .txn-type-badge {
  color: var(--text-secondary);
}
[data-theme="light"] .txn-history-badge.buy,
[data-theme="light"] .txn-type-badge.buy {
  background: rgba(52,199,89,0.12);
  color: var(--gain);
}
[data-theme="light"] .txn-history-badge.sell,
[data-theme="light"] .txn-type-badge.sell {
  background: rgba(255,59,48,0.12);
  color: var(--loss);
}
[data-theme="light"] .txn-ask-ai-btn {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 16px rgba(0,0,0,0.08);
  color: var(--text-secondary);
}
[data-theme="light"] .txn-ai-shine {
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.24) 40%,
    transparent 60%
  );
}
[data-theme="light"] .txn-ask-ai-btn:active {
  background: rgba(0,0,0,0.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 8px rgba(0,0,0,0.08);
}

[data-theme="light"] .portfolio-action-bar {
  color: var(--text-secondary);
}
[data-theme="light"] .portfolio-action-chip {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.9);
  color: var(--text-secondary);
}
[data-theme="light"] .portfolio-action-chip:active {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .portfolio-action-chip--orb {
  background: rgba(141,159,255,0.10);
  border-color: rgba(141,159,255,0.24);
}
[data-theme="light"] .portfolio-action-chip--orb:active {
  background: rgba(141,159,255,0.16);
}

[data-theme="light"] .empty-holdings-icon {
  color: var(--text-tertiary);
}
[data-theme="light"] .empty-action-btn.primary {
  background: var(--text);
  color: var(--surface);
}
[data-theme="light"] .empty-action-btn.secondary {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}

[data-theme="light"] .add-holding-sticky {
  background: rgba(255,255,255,0.95);
}
[data-theme="light"] .add-holding-input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  color: var(--text);
}
[data-theme="light"] .add-holding-input:focus {
  border-color: rgba(0,0,0,0.2);
}
[data-theme="light"] .add-holding-input::placeholder {
  color: var(--text-tertiary);
}
[data-theme="light"] .add-holding-result {
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .add-holding-result:active {
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .add-holding-ticker {
  color: var(--text);
}

[data-theme="light"] .port-option,
[data-theme="light"] .brokerage-info-card,
[data-theme="light"] .brokerage-option {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .port-option:active,
[data-theme="light"] .brokerage-option:active {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .port-option.active {
  background: #ffffff;
  border-color: var(--gain);
}
[data-theme="light"] .port-option.active .port-option-name {
  color: var(--text);
}
[data-theme="light"] .port-action-btn:active {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .port-inline-input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  color: var(--text);
}
[data-theme="light"] .port-inline-input:focus {
  border-color: rgba(0,0,0,0.2);
}
[data-theme="light"] .port-inline-btn.cancel {
  background: rgba(0,0,0,0.03);
  color: var(--text-tertiary);
}
[data-theme="light"] .port-add-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}
[data-theme="light"] .port-add-btn:active {
  background: rgba(0,0,0,0.06);
}

[data-theme="light"] .brokerage-option.selected {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .brokerage-option.selected .brokerage-name {
  color: var(--text-secondary);
}
[data-theme="light"] .brokerage-upload-label {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-tertiary);
}
[data-theme="light"] .brokerage-upload-label:active {
  background: #ffffff;
  border-color: rgba(0,0,0,0.2);
}