/* Net Worth Hub theme-parity layer.
 * Loaded after product-shell.css so child components consistently consume
 * the shared --networth-* light/dark tokens instead of legacy dark literals.
 */

body.tool-networth-page .btn,
body.tool-networth-page .mini-btn,
body.tool-networth-page .detail-tab,
body.tool-networth-page .tool-utility-link {
  border-color: var(--networth-border);
  background: color-mix(in srgb, var(--networth-panel) 96%, transparent);
  color: var(--networth-text);
  box-shadow: none;
}

body.tool-networth-page .btn.primary,
body.tool-networth-page .mini-btn.active,
body.tool-networth-page .detail-tab.active,
body.tool-networth-page .tool-utility-link.primary {
  border-color: color-mix(in srgb, var(--networth-accent) 28%, var(--networth-border));
  background: var(--networth-accent-soft);
  color: var(--networth-accent);
}

body.tool-networth-page .summary-tile {
  border-color: var(--networth-border);
  background: linear-gradient(180deg, var(--networth-panel-strong), var(--networth-panel));
  color: var(--networth-text);
}

body.tool-networth-page .summary-tile.liability {
  border-color: color-mix(in srgb, var(--networth-negative) 20%, var(--networth-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--networth-panel-strong) 90%, var(--networth-negative) 10%),
    color-mix(in srgb, var(--networth-panel) 94%, var(--networth-negative) 6%)
  );
}

body.tool-networth-page .summary-tile.ptcg,
body.tool-networth-page #ptcgPortalLink {
  border-color: color-mix(in srgb, #8b5cf6 24%, var(--networth-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--networth-panel-strong) 86%, #8b5cf6 14%),
    color-mix(in srgb, var(--networth-panel) 92%, #8b5cf6 8%)
  );
}

body.tool-networth-page .summary-label {
  color: var(--networth-text);
}

html[data-theme="light"] body.tool-networth-page #ptcgPortalLink .ptcg-portal-action,
html[data-theme="light"] body.tool-networth-page .max-wallet-action,
html[data-theme="dark"] body.tool-networth-page #ptcgPortalLink .ptcg-portal-action,
html[data-theme="dark"] body.tool-networth-page .max-wallet-action {
  border-color: color-mix(in srgb, #8b5cf6 30%, var(--networth-border));
  background: color-mix(in srgb, var(--networth-panel-strong) 82%, #8b5cf6 18%);
  color: var(--networth-text);
}

html[data-theme="light"] body.tool-networth-page #ptcgPortalLink:hover,
html[data-theme="light"] body.tool-networth-page #maxCryptoSummaryTile:hover,
html[data-theme="dark"] body.tool-networth-page #ptcgPortalLink:hover,
html[data-theme="dark"] body.tool-networth-page #maxCryptoSummaryTile:hover {
  border-color: color-mix(in srgb, var(--networth-accent) 38%, var(--networth-border));
  box-shadow: var(--networth-shadow);
}

body.tool-networth-page .allocation-ribbon {
  background: color-mix(in srgb, var(--networth-muted) 18%, transparent);
}

body.tool-networth-page .allocation-tile,
body.tool-networth-page .allocation-tile.is-primary-tile {
  border-color: var(--networth-border);
  background: linear-gradient(180deg, var(--networth-panel-strong), var(--networth-panel));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--networth-text) 6%, transparent);
}

body.tool-networth-page .allocation-tile.is-primary-tile {
  border-color: var(--networth-border-strong);
}

body.tool-networth-page .allocation-label,
body.tool-networth-page .allocation-note {
  color: var(--networth-muted);
}

body.tool-networth-page .allocation-amount {
  color: var(--networth-text);
}

body.tool-networth-page .chart-empty {
  border-color: var(--networth-border);
  background: color-mix(in srgb, var(--networth-panel) 72%, transparent);
  color: var(--networth-muted);
}

body.tool-networth-page .curve-stat {
  border-color: var(--networth-border);
  background: color-mix(in srgb, var(--networth-soft) 74%, var(--networth-panel));
}

body.tool-networth-page .curve-legend-item {
  border-color: var(--networth-border);
  background: color-mix(in srgb, var(--networth-soft) 64%, var(--networth-panel));
  color: var(--networth-muted);
}

body.tool-networth-page .curve-legend-item.active {
  border-color: color-mix(in srgb, var(--series-color) 42%, var(--networth-border));
  background: color-mix(in srgb, var(--series-color) 12%, var(--networth-panel));
  color: var(--networth-text);
}

body.tool-networth-page .curve-grid {
  stroke: color-mix(in srgb, var(--networth-muted) 18%, transparent);
}

body.tool-networth-page .curve-axis,
body.tool-networth-page .curve-guide {
  stroke: color-mix(in srgb, var(--networth-muted) 28%, transparent);
  background: color-mix(in srgb, var(--networth-muted) 30%, transparent);
}

body.tool-networth-page .curve-point {
  stroke: var(--networth-panel-strong);
}

body.tool-networth-page .curve-label {
  fill: var(--networth-muted);
}

body.tool-networth-page .curve-marker {
  border-color: var(--networth-panel-strong);
  box-shadow: 0 0 0 1px var(--networth-border);
}

body.tool-networth-page .curve-tooltip {
  border-color: var(--networth-border);
  background: var(--networth-panel-strong);
  box-shadow: var(--networth-shadow);
  color: var(--networth-text);
}

body.tool-networth-page .entry-hint,
body.tool-networth-page .status {
  border-color: var(--networth-border);
  background: color-mix(in srgb, var(--networth-soft) 72%, var(--networth-panel));
  color: var(--networth-muted);
}

body.tool-networth-page .entry-row,
body.tool-networth-page .detail-card,
body.tool-networth-page .list-row,
body.tool-networth-page .empty {
  border-color: var(--networth-border);
  background: color-mix(in srgb, var(--networth-panel) 96%, transparent);
  color: var(--networth-text);
}

body.tool-networth-page .entry-row.active {
  border-color: color-mix(in srgb, var(--networth-accent) 28%, var(--networth-border));
  background: var(--networth-accent-soft);
}

body.tool-networth-page input,
body.tool-networth-page select {
  border-color: var(--networth-border);
  background: var(--networth-panel-strong);
  color: var(--networth-text);
}

body.tool-networth-page input::placeholder {
  color: color-mix(in srgb, var(--networth-muted) 62%, transparent);
}

body.tool-networth-page input:focus,
body.tool-networth-page select:focus {
  border-color: color-mix(in srgb, var(--networth-accent) 52%, var(--networth-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--networth-accent) 14%, transparent);
}

body.tool-networth-page .mini-btn.del {
  border-color: color-mix(in srgb, var(--networth-negative) 28%, var(--networth-border));
  background: color-mix(in srgb, var(--networth-negative) 12%, var(--networth-panel));
  color: var(--networth-negative);
}

body.tool-networth-page .entry-row:hover,
body.tool-networth-page .summary-tile-link:hover {
  box-shadow: var(--networth-shadow);
}